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

8fq7wneg 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(2221)

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

2条答案

不要在calc中放置空格：

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

使用theme()函数以点表示法访问Tailwind配置值。
当你只想在声明的一部分中引用主题配置中的值时，这可能是@apply的一个有用的替代方案：

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