Tailwind 自定义颜色在 Angular 生产构建中不起作用答案

【问题标题】：Tailwind Custom Colours not Working in Angular Production BuildTailwind 自定义颜色在 Angular 生产构建中不起作用
【发布时间】：2021-12-07 22:36:57
【问题描述】：

我在 Tailwind 中有一组颜色，在使用 ng serve 或 Angular 的开发版本时所有这些颜色都有效。

但是，在使用网站的生产版本时，某些颜色似乎不起作用。我尝试将颜色放在theme.extend.colors 中，但这似乎不起作用。

这是我的一些颜色的示例：

module.exports = {
purge: ['./src/**/*.html', './src/**/*.ts'],
darkMode: false,
theme: {
    colors: {
        red: colors.red,
        blue: colors.blue,
        neutral: colors.grey,
        success: {
            ['50']: colors.green['100'],
            ['100']: colors.green['110'],
            ['200']: colors.green['120'],
            ['300']: colors.green['130'],
            ['400']: colors.green['140'],
            ['500']: colors.green['150'],
            ['600']: colors.green['160'],
        },
        warning: {
            ['50']: colors.orange['100'],
            ['100']: colors.orange['110'],
            ['200']: colors.orange['120'],
            ['300']: colors.orange['130'],
            ['400']: colors.orange['140'],
            ['500']: colors.orange['150'],
            ['600']: colors.orange['160'],
        },
        unassessed: {
            ['50']: colors.pink['110'],
            ['100']: colors.pink['120'],
        },
    },
}

这里所有颜色都可以，除了unassessed，我错过了什么吗？

【问题讨论】：

标签： angular tailwind-css

【解决方案1】：

很有趣，但现在我已经解决了，我明白为什么会这样了。

unassessed 类目前只用在一个地方，它是在运行时计算的，例如

<div [ngClass]="'border-' + stepState.colourClass + '-100'"

变量stepState.colourClass 是unassessed，这意味着 Tailwind/Angular 认为它没有被使用，并且将其从最终的生产版本中“摇晃”出来。

我最终将该类添加到清除安全列表中，从而解决了该问题。这就是 tailwind.config.js 最终的样子：

module.exports = {
purge: {
    content: ['./src/**/*.html', './src/**/*.ts'],
    safelist: [
        'border-unassessed-100',
        'bg-unassessed-50',
    ],
},
darkMode: false,
theme: {
    colors: {
        red: colors.red,
        blue: colors.blue,
        neutral: colors.grey,
        success: {
            ['50']: colors.green['100'],
            ['100']: colors.green['110'],
            ['200']: colors.green['120'],
            ['300']: colors.green['130'],
            ['400']: colors.green['140'],
            ['500']: colors.green['150'],
            ['600']: colors.green['160'],
        },
        warning: {
            ['50']: colors.orange['100'],
            ['100']: colors.orange['110'],
            ['200']: colors.orange['120'],
            ['300']: colors.orange['130'],
            ['400']: colors.orange['140'],
            ['500']: colors.orange['150'],
            ['600']: colors.orange['160'],
        },
        unassessed: {
            ['50']: colors.pink['110'],
            ['100']: colors.pink['120'],
        },
    },
}

}

【讨论】：