如何在Tailwind CSS中使用calc()？

Question

我有这个HTML代码：

  <div class="container h-screen w-screen">
    <div class="navBar h-7"></div>
    <div class="content-container"></div>
  </div>

我已将 .navBar 的高度设置为 h-7。现在我想将 .content-container 的高度设置为 100vh-(h-7)。

我该如何使用 calc() 来设置它？

- kob003

Answer 1

计算时请勿输入空格：

class="w-[calc(100%+2rem)]"

输出：

.w-\[calc\(100\%\+2rem\)\] {
  width: calc(100% + 2rem);
}

或者您可以使用下划线_代替空格：

_{参考：处理空格}

<script src="https://cdn.tailwindcss.com"></script>
<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>

我们也可以使用主题变量：

h-[calc(100%-theme(space.24))]

- doğukan

---

也可以像这样省略空格 w-[calc(100%-10rem)]。 - edta

记住，各位，没有空格！ - Ray Jasson

如果您想将此添加到Tailwind配置文件中，则在扩展主题时应使用空格而不是下划线。 - TheLandolorien

Answer 2

theme()

使用theme()函数，通过点号标记访问您的Tailwind配置值。

当您想在声明的一部分中仅引用主题配置中的某个值时，这可以是@apply的有用替代方法：

.content-container {
  height: calc(100vh - theme('spacing.7'));
}

- Digvijay

---

这正是我正在寻找的确切用例。不确定 'spacing.7' 究竟是什么，但还是谢谢！ - Zack Plauché

我认为spacing.与我的h-有关，我使用h-20，所以spacing.20适用于我。 - MSH

当我尝试使用class="min-h-[calc(100vh - (2 * theme('spacing.3')))]"时，我期望它会被解析为class="min-h[calc(100vh - (2 * 0.75rem))]"，但实际上并没有，也没有设置最小高度。是否有一种方法可以在类定义中使用theme()函数，而不是将其放在标准CSS中？ - John Y

@JohnY兄弟，你在你的类字符串中不应该加入空格。这个问题在这个答案中已经提到了很多次。 - undefined

有点晚来参加派对，但是在Tailwind中，“spacing”是用于所有padding、margin、gap、height、width等的单位。以防其他人在阅读这篇文章时有疑问。 - undefined