背景
Tailwind CSS 是一款基于原子类的 CSS 框架，它可以让前端开发者快速地构建出现代化的、高效的用户界面。然而，有时候在 Safari 中使用 Tailwind CSS 时，会出现样式失效的问题，这给开发者带来了很多困扰。
问题分析
在 Safari 中，有一些 CSS 属性的默认值与其他浏览器不同。例如，Safari 中的 line-height 默认值是 normal，而其他浏览器中的默认值是 normal 的计算值（通常为 1.2）。这就导致了在 Safari 中使用 Tailwind CSS 时，某些样式会失效。
例如，下面的 Tailwind CSS 样式在 Chrome 中可以正常工作，但在 Safari 中却无法生效：
---- -------------------- --- --------------- ----------------- ----------- -- -------------------------- -- - -------- --- --------- ------
为了让这些样式在 Safari 中正常工作，我们需要手动指定一些 CSS 属性的值。在上面的例子中，我们可以添加以下 CSS 样式：
------------ - ----------- ------- - --------- - ---------- ------- ------------ ---- - ---------- - ------------ ---- - -------------- - ------ -------- -
这样，我们就可以在 Safari 中正常地显示这些样式了。
解决方案
为了解决 Tailwind CSS 在 Safari 中出现样式失效的问题，我们可以手动指定一些 CSS 属性的值。为了方便起见，我们可以使用 @layer 和 @variants 来自定义一些样式。
例如，我们可以在 tailwind.config.js 文件中添加以下配置：
-------------- - -
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
------------ -
---------- ------
--
------ ---
------- -
----------------------------- -----
--------------------- -----
--
------------- -
-------------------- -----
--
-- -----
------ -
----------- -
--------- ------ -- - ------ ----- ---
--
--
--------- -
------- -
----------- ---------------
--
--
-这样，我们就可以在 Tailwind CSS 中使用 line-height:normal 来指定 line-height 的计算值了。
---- -------------------- --- --------------- --------- ---------------------- ----------- -- -------------------------- -- - -------- --- --------- ------
结论
在 Safari 中使用 Tailwind CSS 时，我们需要手动指定一些 CSS 属性的值。为了方便起见，我们可以使用 @layer 和 @variants 来自定义一些样式。这些样式可以在 tailwind.config.js 文件中进行配置。通过这种方式，我们可以解决 Tailwind CSS 在 Safari 中出现样式失效的问题，并让我们的应用程序在所有浏览器中都能正常工作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673c5c487088281697c7b9b5