Question

我是 Gatsby 的新手，我正在使用带有 postcss 的 tailwind css。我在 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-production

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 的回答：我想说真正的问题是当您在配置中包含 purge 选项时，Tailwind 在构建过程中在后台使用的 PurgeCSS 如何确定在构建过程中要清除的类构建过程。

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

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

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

来自 TailwindCSS 文档：

<块引用>

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

Answer 2

根据Tailwind + Gatsby docs，有两个重要的陈述需要考虑：

<块引用>

在 gatsby-browser.js 中为 Tailwind 指令添加导入规则和自定义 CSS，以便在构建中考虑它们。

还有：

<块引用>

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

在您的情况下，问题可能来自 PurgeCSS 指令，因为它不存在，因此它可能会清除所有样式。修复它：

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

来源：https://tailwindcss.com/docs/guides/gatsby

或者：

module.exports = {
  purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx"],
  theme: {},
  variants: {},
  plugins: [],
}

来源：https://www.gatsbyjs.com/docs/how-to/styling/tailwind-css/

您可以尝试的另一件事是将您的样式移动到您的 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 之后加载它。

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

2 个答案:

更长的版本：