背景
Tailwind 是一个流行的 CSS 框架，它提供了丰富的 CSS 类，可以快速地构建页面。然而，在 IE 浏览器下，部分样式可能无法生效，这给前端开发带来了不小的困扰。
原因
Tailwind 使用了一些新的 CSS 特性，比如 @apply、CSS Grid 等，而这些特性在 IE 浏览器下并不支持，因此部分样式无法生效。
解决方案
方案一：使用 PostCSS 插件
Tailwind 支持使用 PostCSS 插件来解决在 IE 浏览器下部分样式无法生效的问题。我们可以使用 postcss-preset-env 插件来将不支持的 CSS 特性转换成浏览器支持的 CSS。
首先，安装 postcss-preset-env 插件：
npm install postcss-preset-env --save-dev
然后，在 postcss.config.js 文件中，添加 postcss-preset-env 插件：
module.exports = {
plugins: [
require('postcss-preset-env')({
browsers: 'IE 11'
}),
require('tailwindcss')
]
}这里的 browsers 参数指定要支持的浏览器，我们这里选择支持 IE 11。
方案二：手动添加样式
如果不想使用 PostCSS 插件，我们也可以手动添加样式来解决在 IE 浏览器下部分样式无法生效的问题。
比如，如果我们使用了 @apply 特性，可以手动将样式展开：
-- -------------------- ---- ------- ---- - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ----------- ------- ------ ------ ----------------- ----- -------------- ---- - ---------- - ----------------- --------- - ------------ - ------ ---- - -- ------ -- ------------ - -------- ------------- -------- --- ----- ---------- ----- ------------ ----- ----------- ------- ------ ------ ----------------- ----- -------------- ---- - ------------------ - ----------------- --------- -
方案三：放弃支持 IE 浏览器
如果你的项目可以放弃支持 IE 浏览器，那么这个问题就不存在了。可以使用 @supports 来判断浏览器是否支持某个 CSS 特性，如果不支持，就使用备用样式。
-- -------------------- ---- -------
---- -
-------- -------------
-------- --- -----
---------- -----
------------ -----
----------- -------
------ ------
----------------- -----
-------------- ----
-
---------- -
----------------- ---------
-
------------ -
--------- --------- ----- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
-
-总结
Tailwind 在 IE 浏览器下部分样式无法生效的问题，可以使用 PostCSS 插件、手动添加样式或者放弃支持 IE 浏览器来解决。选择哪种方案，需要根据具体情况来决定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66022780d10417a222d8cf47