如何在 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()

来设置？

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))]

Answer 2

主题()

使用

theme()

函数使用点符号访问您的 Tailwind 配置值。

当您只想为声明的一部分引用主题配置中的值时，这可能是

@apply

的有用替代方案：

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

Answer 3

进入config.js文件中扩展添加： 高度： { '100vh-h-7': '计算(100vh - 3rem)', }, 在你的 html 中你可以使用这个类，如下所示：

内容容器 (100vh-h-7)