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

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

87246 次浏览
小开
最佳答案

theme()

Use the theme() function to access your Tailwind config values using dot notation.

This can be a useful alternative to @apply when you want to reference a value from your theme configuration for only part of a declaration:

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

If you are using v2.x, add mode: 'jit' to your tailwind.config.js (no mode: 'jit' needed in tailwind v3)

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

And use like this: (Without space!)

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

It will produce:

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

We can use the theme variables as well:

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

Tailwind v3 update

Now we can use an underscore _ instead of whitespaces:

Ref: Handling whitespace

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


提交答案