使用 ng-[] 中的变量的 JIT 顺风 css 不渲染颜色

Posted 2023-03-07

【中文标题】使用 ng-[] 中的变量的 JIT 顺风 css 不渲染颜色

【英文标题】：JIT tailwindcss using variable in bg-[] not rendering color

【发布时间】：2021-07-21 04:47:47

【问题描述】：

当像这样<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]`

知道为什么

【问题讨论】：

非常肯定，因为 JIT 使用与 PurgeCSS 相同的机制。正如 Tailwind 网站所说的清除 (tailwindcss.com/docs/optimizing-for-production) - 只要类名完整地出现在您的模板中，PurgeCSS 就不会删除它。在您的情况下，您的模板本身没有类 bg-[#84CC79] - 这个类是由 Next 呈现的。检查你编译的 CSS 类

【参考方案1】：

使用模板字符串

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

【讨论】：

嗨，我正在使用它们，但仍然无法使用

根据 Tailwind 的说法，这种语法不起作用！ tailwindcss.com/docs/content-configuration#dynamic-class-names

【参考方案2】：

首先，这是您的自定义类吗？因为tailwind默认没有这个类，所以需要手动创建。

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

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

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

// etc..

不要忘记将这个safelist.txt 文件包含到您的配置中，以便tailwind 可以看到它。

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

【参考方案3】：

来自the Tailwindcss documentation

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

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

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