[英]Tailwind Custom Colors Not Complied
在npm start (craco start)
上,一切正常,正在编译 colors。
但是,当运行npm run build (craco build)
时,每个配置只有一种颜色被编译,来自 theme.textColor 的dallas
和来自theme.textColor
vista-white
theme.gradientColorStops
我试过了:
theme.textColor
属性。node_modules
和npm i
。build
并重建。// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
};
// tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
textColor: (theme) => ({
...theme('colors'),
dallas: '#664A2D',
'blue-charcoal': '#24292E',
denim: '#0D66C2',
'spring-green': '#05E776',
flamingo: '#E65A4D',
}),
gradientColorStops: (theme) => ({
...theme('colors'),
'vista-white': '#E1DFDC',
}),
},
variants: {
extend: {},
},
plugins: [],
};
感谢@George指出问题:
Purge 将无法识别您对此 class 的使用。 请参阅https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html 。 具体来说,“不要使用字符串连接来创建 class 名称”。 清除在任何方面都不是“智能”的,它通过将您的实用程序与整个模板中的类(或任何字符串,真的..)进行匹配来工作。
一种可能的解决方案是将要清除的类添加到purge.safelist
:
// tailwind.config.js
module.exports = {
// Added safelist
purge: {
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
options: {
safelist: ['hover:text-blue-charcoal', 'hover:text-denim', 'hover:text-spring-green', 'hover:text-flamingo'],
},
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
textColor: (theme) => ({
...theme('colors'),
dallas: '#664A2D',
'blue-charcoal': '#24292E',
denim: '#0D66C2',
'spring-green': '#05E776',
flamingo: '#E65A4D',
}),
gradientColorStops: (theme) => ({
...theme('colors'),
'vista-white': '#E1DFDC',
}),
},
variants: {
extend: {},
},
plugins: [],
};
您应该将 textColor 更改为 colors。
module.exports = {
theme: {
colors: {
// Configure your color palette here
}
}
}
要在 Tailwind 中自定义文本 colors,您需要像这样配置 tailwind.config.js
module.exports = {
theme: {
textColor: {
'primary': '#3490dc',
'secondary': '#ffed4a',
'danger': '#e3342f',
}
}
}
您可以参考 Tailwind文档了解更多信息。
如果您使用 Tailwind 3,您可以:
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
},
}
}
}
没用就加“扩展”,所有colors都将被重置这让你不必使用安全列表
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.