Production Gatsby 博客未在 MDX 文件中呈现 TailwindCSS 类

Question

我正在开发我的 Gatsby blog/site based on this Leonids 启动器。进行了一些更改以添加适合我需要的功能，包括使用 .mdx 文件来编写页面和帖子，以便我可以在 MD 中添加 JS。

使用 gatsby develop 工作和预览站点时，一切看起来都不错。现在，在进行生产时，.mdx 文件中的组件中使用的 Tailwind 类不会呈现。尝试将包含 @tailwind utilities 的 global.css 文件导入到 mdx 中，但没有成功。类出现在检查器中，但不在 CSS 中显示任何样式。

当在 tsx 或 js 文件中使用 Tailwind 类时，它们可以工作。但是当我在 mdx 文件中用这些类设置样式的组件中使用它们时就不会了。

那么在构建生产站点和开发站点时真正发生了什么变化？我真的不知道接下来要尝试什么，因为没有任何错误或警告。

这是 repo to the site. And this 按钮未选择 Tailwind 按钮的示例类。

为什么会这样？

谢谢大家！希望我带来了足够的信息。

干杯！

Answer 1

解决了！

对于偶然发现此问题的任何人，发生的事情是 TailwindCSS 使用 PurgeCSS 清理任何未使用的类。此清理仅在生产版本上完成，在开发阶段，它们始终可用于快速更改。

我只需要将 .mdx 添加到 tailwind.config.js 文件的排除列表中。像这样：

module.exports = {
  purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx", "./content/**/*.mdx"],
  ...
}

我的 .mdx 文件在 ./content/... 下，所以我只是将表达式添加到列表中，以便清除过程也考虑这些文件。

我意识到这是问题所在，因为 Tailwind 类在 js 文件和 some 类中工作在 chrome devtools 中加载并可见。

Production Gatsby 博客未在 MDX 文件中呈现 TailwindCSS 类

Production Gatsby blog not rendering TailwindCSS classes in MDX files

production

mdx

gatsby

tailwind-css

解决了！