如何在顺风 CSS 中使用 calc()？答案

【问题标题】：how to use calc() in tailwind CSS?如何在顺风 CSS 中使用 calc()？
【发布时间】：2021-05-04 15:45:45
【问题描述】：

我有这个 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() 来设置它？

【问题讨论】：

【解决方案1】：

如果您使用的是 v2.x，请将 mode: 'jit' 添加到您的 tailwind.config.js（tailwind v3 中不需要 mode: 'jit'）

module.exports = {
  mode: 'jit',
  ....
};

并像这样使用：（没有空格！）

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

它将产生：

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

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

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

Tailwind v3 更新

现在我们可以使用下划线 _ 代替空格：

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

【讨论】：

【解决方案2】：

使用theme() 函数通过点表示法访问您的 Tailwind 配置值。

当您只想从主题配置中为声明的一部分引用值时，这可能是@apply 的有用替代方案：

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

【讨论】：