盖茨比动态样式在生产版本中不起作用

Question

我是盖茨比的新手，我正在使用顺风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-production

更新 三月1st，2021

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

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

---

原始 OP 代码/意图

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

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

我的猜测是，在你有很多可能的颜色的情况下，你可能会使用一个返回完整类名的函数/钩子，但我还没有测试过。

---

更长的版本：

您没有向我们展示完整的 tailwind.config.js 文件，但我假设您在那里的某个地方使用了purge选项。

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

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

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

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

来自 TailwindCSS 文档：

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

Answer 2

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

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

和：

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

在您的情况下，问题可能来自 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后加载它。