在 Tailwind 中使用 calc() 函数计算宽度或高度时，如果单位为百分数，可能会出现计算错误的情况。这是因为 Tailwind 在处理百分数时，会将其转换为 rem 或 px 单位，而 calc() 函数中使用的单位是百分数，导致计算结果出现错误。
问题描述
例如，我们要将一个容器的宽度设置为屏幕宽度的一半：
<div class="container w-1/2"></div>
这里使用了 Tailwind 的 w-1/2 类，表示宽度为屏幕宽度的一半。但是，如果我们想将容器的宽度设置为屏幕宽度的一半再减去 20px，就需要使用 calc() 函数：
<div class="container w-calc(50% - 20px)"></div>
这里使用了 Tailwind 提供的 w-calc() 类，表示宽度为 calc(50% - 20px)。但是，如果我们在实际运行时发现容器的宽度并不是我们期望的值，而是偏小或偏大，这就可能是因为 Tailwind 在处理百分数时，将其转换为了 rem 或 px 单位，导致了计算错误。
解决方法
为了解决这个问题，我们可以通过在 Tailwind 的配置文件中添加自定义单位的方式，将百分数作为一种新的单位，并将其转换为 calc() 函数中可用的百分数单位。
第一步：在配置文件中添加自定义单位
在 Tailwind 的配置文件中添加如下代码：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
-------- -
------ ------
--
--
----- -
-- ---- -- --- ------- --------- -- --- --- ------ ---- -- --- ----
----- ------
-- --- --- ------ ---------- ----
--------------- ----
--
--
--------- ---
-------- ---
--这里我们在 theme.extend.spacing 中添加了一个新的间距值 '1/2'，并将其设置为 50%。然后在 calc 中添加了一个新的百分数单位 percentageUnit，表示百分数。
第二步：使用新的百分数单位
现在我们可以使用新的百分数单位了：
<div class="container w-calc(1/2 - 20px)"></div>
这里我们使用了 w-calc() 类，并将宽度设置为 calc(1/2 - 20px)，其中 1/2 表示百分数单位，而不是 rem 或 px 单位。这样，Tailwind 就会将 1/2 转换为 50%，并在计算时使用百分数单位，避免了计算错误。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
--------------- ---- ------------
----- ---------------- ----------------------------------------------------------------- --
-------
---------- -
------- ------
----------------- --------
-
--------
-------
------
---- ---------------- -------------
---- ---------------- ---------- - -------------
------- -----------------------------------------------------------------------
-------
-------总结
在 Tailwind 中使用 calc() 函数计算百分数单位时，可能会出现计算错误的情况。为了解决这个问题，我们可以在 Tailwind 的配置文件中添加自定义单位，并使用新的百分数单位来计算宽度或高度。这样可以避免计算错误，并使代码更加清晰易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bdb660add4f0e0ff75d2f3