Gatsby 动态样式在生产构建中不起作用

Question

我是 Gatsby 的新手，我正在使用 tailwind css 和 postcss。我在 tailwind.config.js 的主题对象中定义的一些颜色配置在开发环境中有效，但在生产环境中无效。我尝试清理缓存并删除 public 文件夹并重新构建它。那并没有解决问题。我在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 文件中获取要应用的 class 名称。我有类似下面的代码段来设置背景颜色，它在开发环境中工作但在生产环境中不工作。

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

Answer 1

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

In gatsby-browser.js add an import rule for your Tailwind directives and custom CSS so that they are accounted for in build.

并且：

Note: By default, PurgeCSS only runs on the build command as it is a relatively slow process. The development server will include all Tailwind classes, so it’s highly recommended you test on a build server before deploying.

在您的情况下，问题可能来自 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.

之后加载它

Answer 2

TLDR: 在 tailwind.config.js 中使用 purge 选项时，不要在 class 名称中使用字符串连接。相反，提供 完整的 class 名称.

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

2021 年 3 月 1 日更新

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

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

原OPCode/Intent

您已完成此操作：<div className={`bg-${color}`>

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

我的猜测是，如果您有多种可能的颜色，您可能会使用 function/hook 即 returns 完整的 class 名称，但我还没有测试过还没有。

较长的版本：

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

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

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

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

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

来自 TailwindCSS 文档：

That means that it is important to avoid dynamically creating class strings in your templates with string concatenation, otherwise PurgeCSS won't know to preserve those classes.

Gatsby 动态样式在生产构建中不起作用

Gatsby Dynamic styling not working in production build

gatsby

tailwind-css

较长的版本：