Production Gatsby 博客未在 MDX 文件中渲染 TailwindCSS 类

Question

我正在根据这个狮子座入门者开发我的盖茨比博客/网站。做了一些更改以添加适合我需要的功能，包括使用文件来编写页面和帖子，以便我可以在 MD 中添加 JS。.mdx

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

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

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

这是该网站的存储库。这是一个按钮不选择 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 文件中工作，并且某些类在 chrome devtools 中加载并可见。