csstailwind-css

How to use calc() in tailwind CSS?

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?

Solution

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