未生成tailwind.config.js中的自定义顺风颜色

Question

我目前正在使用顺风进行一个角度项目。

我想添加自定义颜色，所以我修改了顺风配置文件：

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   : [],
};

我使用的是带有hmr配置的webpack、postss、ng-server。我正在使用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文件中，因此元素没有背景色。

Answer 1

您已经复制了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 : {},
},
// ...
}

删除第二个，您的配置应该可以正常工作。