[英]Custom tailwind colors from tailwind.config.js not generated
[英]Importing a File Into Tailwind.Config.JS
我开始使用 Tailwindcss。 我想用 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: []
};
唯一的问题是材料设计调色板 object 相当大 - 所以我宁愿将其保存为单独的文件并将其导入(或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: []
};
但这不起作用。 我还尝试对 colors object 使用spread operator
,如下所示:
// tailwind.config.js
const colors = require("./material-palette");
module.exports = {
theme: {
...colors,
extend: {}
},
variants: {},
plugins: []
};
但这也没有用。
知道如何让它工作吗?
谢谢。
您还必须添加密钥colors
。
所以colors: colors
在你的情况下
module.exports = {
theme: {
extend: {
colors: colors, // instead of just Colors
}
}
}
我复制了你的代码。 因为我们都在寻找相同的答案。 我能够通过这种方式让它工作
// tailwind.config.js
const colors = require('./material-palette');
module.exports = {
theme: {
colors,
},
variants: {},
plugins: []
};
// ./material-palette.js
module.exports = {
'red-50': '#FFEBEE'
'red-a100': '#FF8A80'
...THE REST OF PALETTE
};
上面的答案是正确的,但要更清楚(适用于 Tailwind 2.x):
tailwind.config.js
const colors = require('./your-colors');
module.exports = {
theme: {
extend: {
colors: colors, // instead of just Colors
}
}
}
和
你的颜色.js 例如
module.exports = {
gray: {
'50': '#FAFCFC',
'100': '#E4E8EE',
'200': '#C1C9D0',
'300': '#A2ABB7',
'400': '#8892A2',
'500': '#6B7385',
'600': '#505669',
'700': '#3C4055',
'800': '#2B2E44',
'900': '#2B2E44',
},
blue: {
'50': '#F5FCFF',
'100': '#D9EDFF',
'200': '#ACCFFC',
'300': '#85ACF4',
'400': '#758CEC',
'500': '#5C66D2',
'600': '#414AA6',
'700': '#313B84',
'800': '#262C62',
'900': '#152041',
},
teal: {
'50': '#EEFDFE',
'100': '#CFF3FB',
'200': '#8ED8E9',
'300': '#62BDE4',
'400': '#4D9DCE',
'500': '#277FB5',
'600': '#1C5B92',
'700': '#154876',
'800': '#0F3451',
'900': '#082530',
},
emerald: {
'50': '#F2FEEE',
'100': '#CFF7C9',
'200': '#91E396',
'300': '#52D080',
'400': '#3EB574',
'500': '#288D60',
'600': '#216B44',
'700': '#18533A',
'800': '#113B34',
'900': '#0A2627',
},
orange: {
'50': '#FBF9EA',
'100': '#F6E4BA',
'200': '#E7C07B',
'300': '#DC9742',
'400': '#CB7519',
'500': '#AD5102',
'600': '#893301',
'700': '#6C2706',
'800': '#501A0F',
'900': '#361206',
},
chestnut: {
'50': '#FEFAEE',
'100': '#FCE2C0',
'200': '#EFB586',
'300': '#E78B5F',
'400': '#D7664B',
'500': '#B34434',
'600': '#912728',
'700': '#731620',
'800': '#550F1C',
'900': '#3B0B14',
},
cerise: {
'50': '#FEF7F4',
'100': '#FBE0DD',
'200': '#F2AFB3',
'300': '#EC798B',
'400': '#DC5472',
'500': '#BC3263',
'600': '#98184D',
'700': '#73123F',
'800': '#560E39',
'900': '#3B0427',
},
purple: {
'50': '#FEF7FF',
'100': '#F8DDF4',
'200': '#E8ADE1',
'300': '#D882D9',
'400': '#BF62CF',
'500': '#9B47B2',
'600': '#743095',
'700': '#57237E',
'800': '#3D1867',
'900': '#2A0D53',
},
indigo: {
'50': '#F8F9FE',
'100': '#E7E5FC',
'200': '#C6C0E9',
'300': '#AE9DDE',
'400': '#9B7AD8',
'500': '#7F58BE',
'600': '#5F4199',
'700': '#4A2D7F',
'800': '#362164',
'900': '#20144C',
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.