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

Posted 2023-03-07

【中文标题】Tailwind 自定义颜色在 Angular 生产构建中不起作用

【英文标题】：Tailwind Custom Colours not Working in Angular Production Build

【发布时间】：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，我错过了什么吗？

【参考方案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'],
        ,
    ,