How to use calc() in tailwind CSS?

Question

I have this html:

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

I have set the .navBar's height to h-7. Now I want to set .content-container's height to 100vh-(h-7).

How can I use calc() to set it?

Answer 1

Don't put space in calc:

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

Output:

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

Or you can use underscores _ 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>

We can use the theme variables as well:

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

Answer 2

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'));
}