未生成来自 tailwind.config.js 的自定义顺风颜色答案

【问题标题】：Custom tailwind colors from tailwind.config.js not generated未生成来自 tailwind.config.js 的自定义顺风颜色
【发布时间】：2021-07-28 04:51:41
【问题描述】：

我目前正在使用 tailwind 开发一个 Angular 项目。

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

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、postcss、ng serve。我正在使用 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 文件中，因此元素没有背景颜色。

【问题讨论】：

标签： javascript angular webpack tailwind-css postcss

【解决方案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 : {},
    },
// ...
}

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

【讨论】：