Tailwind CSS，某些自定义颜色无法工作

Question

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

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 只会为在您的代码中找到的完整样式添加 CSS，因此您动态创建的样式（例如 border-${color}）将不起作用，除非在其他地方使用完整的实用类（例如 border-s2condYellow）。请参见 https://dev59.com/08Pra4cB1Zd3GeqPkaD3#71068925。 - Ed Lucas

Answer 1

较新版本的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。

更新：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]+/
}

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

- Prince Owen

Answer 2

这里是答案。

Tailwind CSS文档中的动态类名(https://tailwindcss.com/docs/content-configuration#dynamic-class-names)。

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>.   // ❌
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>.  // ⭕️

我用了错误的方法 :(

- 김일혁