[英]Custom tailwind colors from tailwind.config.js not generated
我目前正在使用顺风进行 Angular 项目。
我想添加自定义 colors,所以我修改了我的顺风配置文件:
require('dotenv').config();
const enablePurge = process.env.ENABLE_PURGE === 'true';
module.exports = {
theme : {
extend : {
colors : {
'navy' : '#102059',
'argo-dark-blue' : '#102059',
'argo-bluish-gray' : '#F4F5F9',
'argo-light-blue' : '#9BE5F8',
'argo-purple' : '#9f6af9',
},
backgroundColor : (theme) => theme('colors'),
textColor : (theme) => theme('colors'),
},
},
important : true,
purge : {
enabled : enablePurge,
content : [ './src/**/*.html', './src/**/*.scss' ],
},
theme : {
extend : {},
},
variants : {},
plugins : [],
};
我正在使用 webpack、postcss、ng 服务与 hmr 配置。 我正在使用 ng-tailwindcss 来构建。 这是我的 package.json 脚本:
"scripts": {
...
"start": "ng serve --configuration hmr",
"build": "ngtw build && ng build",
...
"prestart": "ngtw build"
},
然后我尝试更改元素的背景颜色:
<span class="fa fa-file-pdf flex justify-center items-center rounded-xl text-xl w-11 h-11 mr-1 bg-argo-light-blue"></span>
即使禁用清除,自定义 css 类也不会出现在最终 css 文件中,因此该元素没有背景颜色。
您复制了theme
:
你在这里定义它
{
// ...
theme: {
extend: {
colors: {
'navy': '#102059',
'argo-dark-blue': '#102059',
'argo-bluish-gray': '#F4F5F9',
'argo-light-blue': '#9BE5F8',
'argo-purple': '#9f6af9',
},
backgroundColor: (theme) => theme('colors'),
textColor: (theme) => theme('colors'),
},
},
// ...
}
然后马上在这里重新定义
{
// ...
theme: {
extend : {},
},
// ...
}
删除第二个,您的配置应该可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.