未生成來自 tailwind.config.js 的自定義順風 colors

Question

我目前正在使用順風進行 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 文件中，因此該元素沒有背景顏色。

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

刪除第二個，您的配置應該可以正常工作。