在开发过程中，我们经常需要使用 CSS 框架来加速开发效率。Tailwind 是一款前端 CSS 框架，其特点是使用类名来描述样式，可以快速定位需要修改的样式。然而，在 Safari 浏览器中，Tailwind 部分样式可能无法完整渲染。这时，我们需要采取一些措施来解决这个问题。
问题出现的原因
Tailwind 中使用了一些 -webkit 的属性，如 -webkit-font-smoothing、-webkit-overflow-scrolling 等。但在 Safari 中，部分 -webkit 属性会被认作是实验性特性，需要通过开启特定的选项才能启用。由于 Safari 默认不开启实验性特性，因此 Tailwind 中使用的这些属性在 Safari 中无法完全渲染。
解决方案
要解决这个问题，我们可以通过以下两种方式来实现：
方案一：开启 Safari 的实验性特性
我们可以通过 Safari 的开发者工具，在「开发」-「实验性功能」-「WebKit」中开启实验性特性，这些实验性特性包括 -webkit 属性。开启方法如下：
- 打开 Safari 浏览器
- 点击「菜单」按钮，选择「偏好设置」
- 点击「高级」选项卡
- 勾选「在菜单栏中显示「开发」菜单」
- 关闭 Safari 偏好设置
- 点击「菜单」-「开发」-「实验性功能」-「WebKit」
- 勾选「CSS图形特性」和「CSS 滚动区域特性」
- 关闭 Safari 的实验性功能面板
开启实验性特性后，Safari 就能够完整渲染 Tailwind 的样式了。但需要注意的是，这种方式需要每次手动开启实验性特性，较为繁琐，而且不适用于需要在多个设备上进行开发的场景。
方案二：自定义 Tailwind 配置文件
另外，我们还可以通过自定义 Tailwind 的配置文件来解决这个问题。我们可以在配置文件中添加相应的 -webkit 属性，从而避免在 Safari 中样式无法完全渲染的问题。具体操作步骤如下：
- 打开 Tailwind 的配置文件
tailwind.config.js - 在
theme对象中添加相应的样式属性，如下所示：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
----------- -
----- -
---------- ------
------------
--------
--------- ----
--------- ---- ----
---------- -------
---------- ----- -----
------------
--
--
-- -- ---------------------- - -------------------------- --
------- -
-------------- --------------
------------------ --------
--
--
--
--------- ---
-------- ---
-- 在 HTML 中使用自定义样式，如下所示：
<div class="webkit:overflow-scrolling-touch webkit:font-smoothing-antialiased"> <!-- 内容 --> </div>
这种方式不需要每次手动开启实验性特性，也没有多余的工作量，同时也能够在多个设备上进行开发和调试，比较适用于团队协作开发。
总结
在 Safari 中，由于默认不开启实验性特性，因此 Tailwind 中的部分样式会无法完全渲染。为了解决这个问题，我们可以采取开启实验性特性或者自定义 Tailwind 配置文件的方式来处理。其中，自定义 Tailwind 配置文件可能更适用于团队协作开发场景，而开启实验性特性较为繁琐，但简单易操作。
希望本文能够帮助大家解决 Tailwind 在 Safari 中的渲染问题，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ea6fa968c7c53b0d00ece