Gatsby 动态样式在生产版本中不起作用

Question

我是 Gatsby 的新手，我正在使用 tailwind css 和 postcss。我在 tailwind.config.js 主题对象中定义的一些颜色配置在开发环境中有效，但在生产中无效。我尝试过清理缓存并删除公用文件夹并重新构建它。那并没有解决问题。我在 tailwind.config.js 中的主题对象是这样的：

theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      primary: {
        DEFAULT: '#4F9C3A',
        900: '#25441c',
      },
      secondary: {
        0: '#ff9563',
        DEFAULT: '#E66437',
        9: '#ae3409',
      },
      footer: {
        light: '#e66437',
        DEFAULT: '#383e42',
        dark: '#26292c',
      },
      neutral: {
        0: '#ffffff',
        DEFAULT: '#ffffff',
        1: '#fafafa',
        9: '#000000',
      },
      accent: {
        1: '#388ac5',
        DEFAULT: '#293842',
      },
      brown: {
        DEFAULT: '#C9AC75',
        2: '#44261c',
      },
      black: '#000000',
    }
}

更新：我已经能够查明问题的根源。我正在使用 gatsby-transformer-json 从 json 文件中获取要应用的类名。我有类似下面的代码段来设置背景颜色，它在开发环境中工作，但在生产环境中不起作用。

<div className={`bg-${color}>
The development build shows proper background color for this segment but production build does not. 
</div>

Answer 1

TLDR： 当您使用 tailwind.config.js 中的选项时，请勿在类名称中使用字符串连接purge。相反，请提供完整的类名。

来源： https: //tailwindcss.com/docs/optimizing-for-product

更新 2021 年 3 月 1 日

感谢 @robotu 带来了另一个很棒的选项：您可以safelist向文件添加一个选项tailwind.config.js，如下所示：

module.exports = {
  // ...
  purge: {
    content: ['./src/**/*.html'],
    safelist: ['bg-primary', 'bg-secondary']
  }
}

原始操作代码/意图

你已经这样做了：<div className={`bg-${color}`>

但 TailwindCSS 更喜欢这样的东西：<div className={ color === "red" ? "bg-red" : "bg-blue" }>

我的猜测是，如果您有多种可能的颜色，您可能可以使用返回完整类名的函数/钩子，但我还没有测试过。

更长的版本：

您没有向我们展示完整的 tailwind.config.js 文件，但我假设您正在purge其中的某个位置使用该选项。

继续 Ferran 的回答：我想说真正的问题是 PurgeCSS（当您在配置中包含该选项时，Tailwind 在构建过程中在后台使用 PurgeCSS）purge如何确定在构建过程中清除哪些类。

它找到与正则表达式匹配的任何字符串：

/[^<>"'`\s]*[^<>"'`\s:]/g

它会天真地找到几乎所有内容，只停在特定的语法符号处。然后它会尝试保留每场比赛，并清除其余的。所以它会找到bg-和color，保留它们，但会清除bg-color，因为 PurgeCSS 的正则表达式没有找到它们。

来自 TailwindCSS 文档：

这意味着避免在模板中通过字符串连接动态创建类字符串非常重要，否则 PurgeCSS 将不知道要保留这些类。