如何解决Production Gatsby博客未在MDX文件中呈现TailwindCSS类
我正在基于此blog/site入门者来研究自己的盖茨比Leonids。进行了一些更改,以添加满足我需求的功能,包括使用.mdx
文件编写页面和帖子,以便我可以在MD内添加JS。
使用gatsby develop
工作和预览网站时,一切看起来都不错。现在进行生产时,.mdx
文件中的组件中使用的Tailwind类不会被渲染。尝试将包含global.css
的{{1}}文件导入到没有运气的mdx中。类会显示在检查器中,但不会在CSS中显示任何样式。
在tsx或js文件中使用Tailwind类时,它们将起作用。但是当我在用mdx文件中的这些类设计样式的组件中使用它们时,就不会这样。
那么在构建产品站点和开发站点时,真正发生了什么变化?我真的不知道下一步该怎么做,因为没有任何错误或警告。
这是网站的repo。 this就是一个按钮的示例,它不显示Tailwind的类。
为什么会这样?
谢谢大家!希望我能带来足够的信息。
干杯!
解决方法
解决了它!
对于那些偶然发现此问题的人,发生的事情是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中加载并可见。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。