Tailwind 是一种基于 CSS 的实用工具库，前端开发者们使用它可以快速构建漂亮且高度自定义的界面，提高开发效率和代码可维护性。但是，在 SSR（服务端渲染）应用程序中，将 Tailwind 应用到项目中，可能会遇到样式失效的情况。本文将介绍这种问题的原因和解决办法，帮助您更好地使用 Tailwind 在 SSR 项目中。
原因分析
在 SSR 应用程序中，服务端会在渲染页面前将组件的结构和数据一起编译成 HTML。在这种情况下，应用程序中的所有 CSS 代码都需要先被编译，然后被放置到 HTML 中作为内联样式。由于 Tailwind 是动态生成的 CSS，为了优化性能并减少文件大小，它会根据项目中实际使用的类别，生成仅包含这些类别所需的 CSS。这样，在构建时，Webpack 在处理 CSS 文件时会自动删除没有使用的规则，只留下应该存在的 Tailwind 样式。然而，在 SSR 中，应用程序的代码可能无法正确地检测和删除未使用的规则，导致样式失效或不在 HTML 中出现。
解决办法
第一步：安装 PostCSS 7
要解决这个问题，首先需要降级使用 PostCSS 版本，从而确保生成的 CSS 规则确实存在于应用程序的代码中。在开始之前，请确保 Tailwind 已成功集成到项目中。然后执行以下命令：
npm uninstall postcss npm install postcss@7 --save-dev
第二步：安装 PostCSS 相关插件
一旦安装 PostCSS 7，接下来需要安装一些额外的插件（如 PostCSS CLI、autoprefixer、@fullhuman/postcss-purgecss 等），以确保 Tailwind 在编译时生成的所有 CSS 规则都被保留下来。执行以下命令：
npm install postcss-cli autoprefixer @fullhuman/postcss-purgecss --save-dev
第三步：修改项目配置文件
在下一步中，在应用程序的配置文件中添加相关代码。在这里我使用的是 Next.js 框架，如果您使用的是其他框架，具体的应用也会存在一定的不同，请根据您的应用程序进行相应的配置文件修改。
打开 next.config.js 文件并添加以下内容：
-- -------------------- ---- -------
----- ------- - --------------------------
----- ------------ - -------------------------
-------------- - --------
--------------
---------------- -- ---- -------- -- -- ----- -- -----------
-------------- -
-----------------------------
---------------------------------
-
--
--该代码将确保在编译应用程序时，使用 PurgeCSS（一个可以删除未使用 CSS 的工具），并且只在生产模式下启用。
第四步：重新启动开发环境
最后一步，重启您的应用程序并检查样式是否已经应用到页面上。如果您看到与预期的完全相同的样式，请恭喜您，您已成功解决了 Tailwind 在 SSR 项目中样式失效的问题。
结论
在这篇文章中，我们介绍了在使用 Tailwind 时，在 SSR 中样式失效或未应用的情况。我们看到在解决这个问题时，需要使用 PostCSS 7 和相关插件，同时对应用程序进行正确的配置。我们希望这个解决办法能够帮助您更好地使用 Tailwind，提高开发效率和代码可维护性。全文示例代码如下，供参考使用。
-- -------------------- ---- -------
----- ------- - --------------------------
----- ------------ - -------------------------
-------------- - --------
--------------
---------------- -- ---- -------- -- -- ----- -- -----------
-------------- -
-----------------------------
---------------------------------
-
--
---- -------------------- ---- -------
-
------------------ -
--------------- ---------
---------------- ---------
---------- ----------
-------------- ---------
------------------------------ --------
--
--------------- -
----------------- ---------
-------------- --------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6747bd66555db9718d1817bc