在前端开发中，使用 Tailwind CSS 可以极大地提高开发效率，但是在 IE11 中，Tailwind CSS 显示错误的问题一直困扰着开发者。本文将介绍如何解决这个问题，让你的网站在 IE11 中也能正常显示。
问题分析
Tailwind CSS 使用了一些 CSS 属性，例如 @apply、gap、grid-template-rows 等，这些属性在 IE11 中并不支持，因此会导致样式显示错误。
解决方案
安装 postcss-preset-env
postcss-preset-env 是一个 PostCSS 插件，它可以将现代 CSS 转换成兼容旧版浏览器的 CSS。我们可以使用它来解决 Tailwind CSS 在 IE11 中的显示问题。
首先，我们需要安装 postcss-preset-env：
npm install postcss-preset-env --save-dev
配置 postcss.config.js
在项目根目录下创建 postcss.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------------
-----------------------
------------------------
-------------------------------
------ --
--------- -
---------------- ----
--
--------- ------ - ---------- --- -- ----
--
-
-这里我们将 postcss-preset-env 的 browsers 配置设置为 ['last 2 versions', 'ie >= 11']，表示支持最近两个版本的浏览器和 IE11。
配置 babel.config.js
如果你的项目中使用了 Babel，那么你还需要配置 babel.config.js，在 presets 中添加 @babel/preset-env，并将 targets 设置为 IE11：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------- -
-------- -
--- ----
-
--
-
-配置 webpack.config.js
如果你的项目中使用了 webpack，那么你还需要在 webpack.config.js 中添加 babel-loader 和 postcss-loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
--------------- -
------- ---------------------
-
-
-
-
-
-
-
-示例代码
下面是一个示例代码，使用了 Tailwind CSS 和 postcss-preset-env，可以在 IE11 中正常显示：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- -----------
----- ---------------- ----------------------------------------------------------------------
-------
------
---- ----------- -------------- ------------ ----------
---- ------------------ ---------- --- ------------------ -------- ----------
------
------- ----------------------------------------------------------------------------------
------- ------------------
------------------- --------
---------
-------
-------总结
本文介绍了如何解决 Tailwind CSS 在 IE11 中显示错误的问题，通过使用 postcss-preset-env 和 Babel，可以将现代 CSS 转换成兼容旧版浏览器的 CSS 和 JavaScript。希望本文对你有帮助，让你的网站在各种浏览器中都能正常显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6559dc2ed2f5e1655d4478c4