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

Question

我目前正在使用 tailwind 进行 Angular 项目。

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

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 文件中，因此该元素没有背景色。

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 : {},
    },
// ...
}

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

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

Custom tailwind colors from tailwind.config.js not generated

javascript

webpack

postcss

angular

tailwind-css