Tailwind CSS，某些自定义颜色不起作用

我正在尝试通过编写一些主题在我的项目中使用 Tailwind 自定义颜色tailwind.config.js extend.

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {
      colors: {
        s2condPurple: '#a32eff',     // works ⭕️
        s2condPink: '#ff0099',       // works ⭕️
        s2condOrange: '#ff5f55',     // works ⭕️
        s2condYellow: '#ffe600',     // doesn't work ❌
        s2condLime: '#cdff64',       // works ⭕️
        s2condMint: '#2af1b5',       // works at 'text-s2condMint' but not at 'border-s2condMint'
        secondTest: '#ffe600',       // works ⭕️ <-- I tested it for s2condYellow but it works perfectly!
        s2condTest2: '#2af1b5',      // doesn't work ❌
        ...
      },
      
    },
  },
  plugins: [],
}

我在代码中使用这些颜色，如下所示：

const colorList: colorListType = {
  life: 'white',
  identity: 's2condPurple',
  arts: 's2condPink',
  industry: 's2condOrange',
  knowledge: 'secondTest',
  sports: 's2condLime',
  languages: 'secondTest',
}

const { [data.name.en.toLowerCase()]: color } = colorList
...
<button
      className={`border focus:outline-none hover:border-${color} active:border-${color} ${
        clicked ? `border-${color}` : 'border-textBlack'
      } `}
    >
      <p className="text-white">{value.kr}</p>
</button>

我可以得到关于这个问题的线索吗？

新版本的 Tailwind 似乎只添加了代码中使用过的类。使用动态类（如示例中的类）时，您必须在safelist财产。

以下是您可以执行此操作的一种方法的示例：

module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    theme: {
        extend: {
            colors: {
                s2condPurple: '#a32eff', // works ⭕️
                s2condPink: '#ff0099', // works ⭕️
                s2condOrange: '#ff5f55', // works ⭕️
                s2condYellow: '#ffe600', // should work⭕️
                s2condLime: '#cdff64', // works ⭕️
                s2condMint: '#2af1b5', // works at 'text-s2condMint' but not at 'border-s2condMint'
                secondTest: '#ffe600', // works ⭕️ <-- I tested it for s2condYellow but it works perfectly!
                s2condTest2: '#2af1b5', // should work ⭕️
            },
        },
    },
    plugins: [],
    safelist: [{
            pattern: /(bg|text|border)-s2cond(Purple|Pink|Orange|Yellow|Lime|Mint|Test|Test2)/
        }

    ]
}

您可以在文档中阅读更多相关信息https://tailwindcss.com/docs/content-configuration#safelisting-classes https://tailwindcss.com/docs/content-configuration#safelisting-classes.

更新：2022 年 6 月 8 日

如果您使用大量动态边距或尺寸，您可能需要将以下内容添加到您的safelist财产。

{
  pattern: /(mt|mb|mr|ml|my|mx|px|py|pt|pb|pl|pr)-[0-9]+/
},
{
  pattern: /flex-.*/
},
{
  pattern: /(bottom|right|top|left)-[0-9]+/
},
{
  pattern: /(w|h)-[0-9]+/
}

希望这可以节省其他人的时间。