如何在WordPress的页面内容中使用Tailwind CSS的类？
我是一个自定义WP主题中使用Tailwind，并在WP页面编辑器中使用的类时遇到了问题。就我的设置而言，我用Node.js安装了Tailwind，并且使用“pnpm build”来构建CSS。这样会生成一个 "output.css" 文件，我把它排队加载到 "functions.php" 中。
Tailwind在我的主题模板文件中工作得很完美。不过，当我在WP页面内容（来自区块编辑器）中添加Tailwind类时，样式就不起作用。
这些类没有被包含在生成的CSS中。所以我临时添加了Tailwind CDN作为快速测试。添加后，页面内容中的类就能起作用—but浏览器控制台显示警告，指出CDN版本不应该在生产环境中使用。
在使用构建方式（而非CDN）时，如何让Tailwind的类在WP页面内容中工作呢？
我想保持优化后的Tailwind构建，同时仍然能够在页面内容中使用Tailwind的类。
解决方案
不要在生产环境中使用Play CDN
切勿在生产环境中使用Play CDN。依赖服务器虽然不是最佳方案，但原因不仅仅在此：Tailwind CSS是一个通过分析源文件来生成编译后CSS的开发工具；Play CDN会在每次页面加载时执行这个过程，分析并生成相同的CSS。每次都这样，确实不好。
使用Tailwind CLI或独立可执行文件
相反，设置一个Tailwind CLI，并将其生成的 output.css 添加到WordPress的 <head> 中。你永远不应该在WordPress中加载 input.css。
- https://tailwindcss.com/docs/installation/tailwind-cli
- https://github.com/tailwindlabs/tailwindcss/releases
- 如何在不使用Node.js和 npm的情况下使用TailwindCSS？
- https://developer.wordpress.org/themes/core-concepts/including-assets
<head>
<!-- Tailwind compiled CSS -->
<link rel="stylesheet" href="/path/to/src/output.css">
</head>
声明源文件
关于这一点，我只会回应 GeneralGrievance的参考。确实，在v3版本中你需要在 content 参数中指定源，但在v4（最新版）中由于自动源检测，这一步就不再必要。此外，v4并不默认使用 tailwind.config.js 文件；相反，你可以在CSS优先配置中自定义或修改源。以下是一些链接：
当源文件修改时，编译后的CSS不会改变
现在已经澄清了安装与用法，我们进入重点：
然而，当我在WP页面内容（来自区块编辑器）中添加Tailwind类时，样式不起作用。
你可能在说两种“不起作用”的情况。
--watch 标志
其中一种发生在开发阶段——只需使用 watch 模式，这样在你修改任何文件时 output.css 就会重新生成。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
缓存管理
另一种问题是绕过浏览器的缓存机制。在开发阶段，可以通过 DevTools -> Network -> Disable cache 启用，并且仅在DevTools打开时生效。
但这并不能解决生产环境的问题。需要知道，像Webpack或 Vite这样的打包工具会自动处理：每当发布一个新的前端构建时，CSS和 JS文件会被分配新的哈希，浏览器的URL也会改变。由于URL改变，浏览器不会从缓存加载，而是重新从服务器获取。
因为你没有使用打包工具，你需要另一种自动化方法，或者手动使用诸如 ? 这样的查询参数来强制浏览器获取更新后的文件。
<head>
<!-- Tailwind compiled CSS -->
<link rel="stylesheet" href="/path/to/src/output.css?v=2026-03-04-233030">
</head>
注：路径仅为示例；当然，请将它们替换为与你的项目匹配的路径。
相关文章
