Gatsby 盖茨比动态造型在生产构建中不起作用

我是新来的盖茨比，我正在使用顺风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',
    }
}

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

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

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

开发版本显示此段的适当背景色，但生产版本不显示。

根据，有两个重要的陈述需要考虑：

在

gatsby browser.js中

为您的Tailwind指令添加导入规则 和自定义CSS，以便在构建中考虑它们

以及：

注意：默认情况下，PurgeCSS仅在build命令上运行，因为它是一个 相对缓慢的过程。开发服务器将包括所有 Tailwind类，因此强烈建议您在构建上进行测试 在部署之前，请访问服务器

在您的情况下，问题可能来自PurgeCSS指令，因为它不存在，所以可能正在清除所有样式。通过以下方式解决此问题：

  // tailwind.config.js
  module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

资料来源：

或：

资料来源：

您可以尝试的另一件事是在

gatsby browser.js中将样式移动到全局样式：

import "tailwindcss/dist/base.min.css"

我假设在您的
gatsby config.js
中，您已经声明了正确的实例：

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      postCssPlugins: [
        require("tailwindcss"),
        require("./tailwind.config.js"), // Optional: Load custom Tailwind CSS configuration
      ],
    },
  },
],

注意：您可以选择添加相应的配置文件（默认情况下为
tailwind.config.js
）。如果要添加自定义配置，则需要在
tailwindcss
之后加载它
使用tailwind.config.js中的
purge
选项时，不要在类名中使用字符串连接。相反，请提供完整的类名

资料来源：



2021年3月1日更新



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

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',
    }
}

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






原始操作代码/意图

您已经这样做了：

但是TailwindCSS更喜欢这样：

我的猜测是，如果您有许多可能的颜色，您可能会使用一个返回完整类名的函数/钩子，但我还没有对此进行测试






较长版本：
您没有向我们显示完整的tailwind.config.js文件，但我假设您正在其中的某个地方使用
purge
选项

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

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

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

/[^”`\s]*[^”`\s://g

这将天真地找到几乎所有的东西，只停留在特定的语法符号。然后，它将尝试保留每一个匹配，并清除其余的匹配。因此，它将查找
bg-
和
color
，保留它们，但将清除
bg color
，因为PurgeCSS的regex没有找到它们

从TailwindCSS文档：

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

可能这不是颜色设置的问题，而是清除的问题。也许你没有配置它或者别的什么。需要查看整个tailwind.config.js以及工作文件的位置（我不熟悉盖茨比）您是否尝试将这些样式移动到全局样式？您的最后一个代码段中有一个拼写错误，应该是：
。另一种方法是在tailwind.config.js文件中添加一个“安全列表”选项：
清除：{内容：['./src/***.html'，…..]，安全列表：['bg-primary'，'bg secondary'，…]}，
。在代码中，您可以继续使用
bg-${color}
谢谢@robotu！我已将此添加到官方答案中。这是一个很好的解决方案。