我正在接触Tailwindcss。我想使用Material Design颜色板重写默认的Tailwind颜色板。我可以轻松地将所有Material Design颜色板剪切并粘贴到tailwind.config.js
文件中,一切都能正常工作,具体方式如下:
module.exports = {
theme: {
colors: {
transparent: "transparent",
black: "#000000",
white: "#FFFFFF",
"red-50": "#FFEBEE",
"red-100": "#FFCDD2",
"red-200": "#EF9A9A",
"red-300": "#E57373",
"red-400": "#EF5350",
"red-500": "#F44336",
"red-600": "#E53935",
"red-700": "#D32F2F",
"red-800": "#C62828",
"red-900": "#B71C1C",
"red-a100": "#FF8A80",
"red-a200": "#FF5252",
"red-a400": "#FF1744",
"red-a700": "#D50000",
...
},
extend: {}
},
variants: {},
plugins: []
};
唯一的问题是,Material Design颜色调色板对象相当大,因此我更愿意将其保存为单独的文件并导入(或require
)到tailwind.config.js
文件中。可以像这样实现:
// material-palette.js
const colors = {
transparent: "transparent",
black: "#000000",
white: "#FFFFFF",
"red-50": "#FFEBEE",
"red-100": "#FFCDD2",
"red-200": "#EF9A9A",
"red-300": "#E57373",
"red-400": "#EF5350",
"red-500": "#F44336",
"red-600": "#E53935",
"red-700": "#D32F2F",
"red-800": "#C62828",
"red-900": "#B71C1C",
"red-a100": "#FF8A80",
"red-a200": "#FF5252",
"red-a400": "#FF1744",
"red-a700": "#D50000",
...
}
// tailwind.config.js
const colors = require("./material-palette");
module.exports = {
theme: {
colors,
extend: {}
},
variants: {},
plugins: []
};
但这并不起作用。我还尝试使用颜色对象的
spread operator
,像这样:// tailwind.config.js
const colors = require("./material-palette");
module.exports = {
theme: {
...colors,
extend: {}
},
variants: {},
plugins: []
};
然而这也没有起作用。
有任何想法如何让它起作用吗?
谢谢。
material-palette.js
中添加一行module.exports = colors
。 - juzraai