使用变量在bg-[]中的JIT tailwindcss未渲染颜色

Question

当将我的颜色作为props传递时，像这样：<List text="something" color="#84AB86" />并在代码中使用className={'bg-[${color}] '}时，它不能正确地呈现。当查看Chrome开发工具时，颜色被正确添加，如此：bg-[#84AB86]手动输入颜色而不从props获取时，它能够正常工作。经过更多测试，似乎也不可能这样做。

const color = "#84CC79"
className={`bg-[${color}]`}

有任何想法为什么

- Maxime Ghéraille

---

很确定是因为JIT使用了与PurgeCSS相同的机制。因此，正如Tailwind网站关于清除（https://tailwindcss.com/docs/optimizing-for-production）所说-只要类名完整地出现在模板中，PurgeCSS就不会将其删除。在您的情况下，您的模板本身没有`bg-[#84CC79]`类。这个类是由Next渲染的。请检查您编译后的CSS类。 - Ihar Aliakseyenka

Answer 1

要在JIT Tailwind中使用动态类，您需要使用`safelist`配置键或创建存根文件，在其中列出您将使用的所有动态类。

配置示例：

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

或者在您的src文件夹中创建safelist.txt，然后像这样在其中添加类：

bg-[#84AB86]
bg-[#fffeee]

// etc..

不要忘记将这个 safelist.txt 文件包含到你的配置 content 中，这样 tailwind 才能监视它。

来自 tailwind 文档的解释

如果你不使用 JIT，那么你可以使用 safelist 选项来进行 PurgeCSS：

// tailwind.config.js
module.exports = {
  purge: {
    // Configure as you need
    content: ['./src/**/*.html'],
    // These options are passed through directly to PurgeCSS
    options: {
      // List your classes here, or you can even use RegExp
      safelist: ['bg-red-500', 'px-4', /^text-/],
      blocklist: [/^debug-/],
      keyframes: true,
      fontFace: true,
    },
  },
  // ...
}

- Danila

Answer 2

如上所述，Tailwind引擎可以动态呈现自定义类：

不喜欢的方式：

className={`bg-[${custom-color}]-100`}

它期望：

const customBgColorLight = 'bg-custom-color-100';

className={`${customBgColorLight} .....`}

为了使其正常工作，您必须在 tailwind.config.js 中的 safelist:[] 中包含类名。 对于 Tailwind v.3。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  safelist: [
    'bg-custom-color-500', // your-custom-css-class
    'text-custom-color-500',
    'border-custom-color-500',
    ..... // other classes
    'hover:bg-custom-color-500', // *** also include it with the selector if needed *** 
    .... // other classes
  ],
  theme: {
    extend: {
      colors: {
        'custom-color': { // you have to use quotes if key is not in camelCase format
          100: '#d6d6d6',
          500: '#5E8EA2',
          .....          //other variants
        },
        ......           // other colors

所以你可以使用它：

// if you want store the values to an object
  const yourClassObj = {
    customBgColor: 'bg-custom-color-500',
    customBrdColor: 'border-custom-color-500',
    customTxtColor: 'text-custom-color-500',
  };

  const { customBgColor, customBrdColor, customTxtColor } = yourClassObj;

<YourComponent
   className={`mb-2 font-semibold py-2 px-4 rounded-lg
      ${ conditionGoesHere ? `${customBgColor} text-white cursor-default`
                  : `${customTxtColor} border ${customBrdColor} 
                     bg-transparent hover:border-transparent 
                     hover:${customBgColor} hover:text-white`
              }`}
 />

- Atana

Answer 3

一个简单的解决方案是使用内置的样式属性。

例如，在React中： 不要使用：

className={`bg-[${color}]`}

使用替代方案：

style={{
    backgroundColor: color,
}}

- Musa Ahmed

Answer 4

来自 Tailwindcss 文档

动态值：请注意，当使用任意值时，仍需要编写可清除的 HTML，并且您的类需要作为完整字符串存在，以便 Tailwind 正确地检测它们。

不要使用字符串拼接来创建类名 --> <div className={mt-[${size === 'lg' ? '22px' : '17px' }]}></div>

应该动态选择完整的类名 --> <div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div> 由于 Tailwind 不包含任何客户端运行时，因此类名需要在构建时静态提取，并且不能依赖于任何在客户端上发生更改的任意动态值。对于这些情况，请使用内联样式，或将 Tailwind 与 CSS-in-JS 库（如 Emotion）结合使用，如果这对您的项目有意义的话。

- john-raymon