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

Posted 2023-03-06

【中文标题】生产 Gatsby 博客未在 MDX 文件中呈现 TailwindCSS 类

【英文标题】：Production Gatsby blog not rendering TailwindCSS classes in MDX files

【发布时间】：2021-02-15 19:40:25

【问题描述】：

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

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

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

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

这是该网站的repo。 this 是一个按钮没有选择 Tailwind 类的示例。

为什么会这样？

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

干杯！

【参考方案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 中加载并可见。