在 npm start (craco start)
一切工作正常,颜色正在编译中。
在运行 npm run build (craco build)
时,每个配置只编译一种颜色,dallas
来自 来自
和 theme.gradientColorStops
的 theme.textColorvista-white
。
我试过了:
- 重新排序
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 will not recognise your usage of this class. See https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html. Specifically, "Don't use string concatenation to create class names". Purge is not 'smart' in any way, it works by matching your utilities against classes (or any string, really..) throughout your templates.
一种可能的解决方案是将要清除的类添加到 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: [],
};
关于javascript - 不符合 Tailwind 自定义颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66330112/