Question

将我的颜色作为这样的道具传递时 <List text="something" color="#84AB86" /> and using in the code className={'bg-[${color}] '} it does not render properly.

在查看 chrome 开发工具时，颜色会像这样正确添加 bg-[#84AB86]

在不从道具中取色的情况下手动放置颜色时，它确实可以正常工作

经过更多的测试，似乎也不可能这样做

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

知道为什么

Answer 1

首先，那是你的自定义类吗？因为 Tailwind 默认没有这个类，需要手动创建。

假设您已经这样做了，要在 JIT 顺风中使用动态类，您需要创建存根文件，在其中列出您将使用的所有动态类。

例如，在您的 safelist.txt 文件夹中创建 src，然后像这样在那里添加类：

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

// etc..

并且不要忘记将此 safelist.txt 文件包含到您的配置中，以便顺风可以观看它。

Explanation from tailwind docs

如果您不使用 JIT，那么您可以为 PurgeCSS 使用 safelist 选项：

// 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,
    },
  },
  // ...
}

Answer 2

使用模板字符串

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

Answer 3

来自 Tailwindcss 文档

<块引用>

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

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

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

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

3 个答案: