Using calc() in Tailwind CSS

Tailwind CSS provides powerful utilities for styling, but sometimes you need more precise control over calculations. The calc() CSS function becomes essential when you need to compute values dynamically, such as setting a height to 100vh - 2rem.

The Problem: Dynamic Height Calculation

When working with layouts that include fixed-height elements like navigation bars, you often need the remaining content area to fill the available space:

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

The challenge is setting .content-container's height to 100vh - h-7 (where h-7 equals 1.75rem in the default Tailwind theme).

Solution 1: Arbitrary Values with calc()

Tailwind supports arbitrary values using square bracket notation, which is perfect for calc() expressions:

<div class="h-[calc(100vh-1.75rem)]"></div>

For dynamic spacing based on Tailwind's theme, use the theme() function:

<div class="h-[calc(100vh-theme(spacing.7))]"></div>

HANDLING WHITESPACE

Tailwind doesn't allow spaces in class names. Replace them with underscores:

<!-- Correct -->
<div class="w-[calc(100%_-_2rem)]"></div>

<!-- Incorrect (won't work) -->
<div class="w-[calc(100% - 2rem)]"></div>

Solution 2: Custom CSS with theme() Function

For reusable calculations, add custom CSS:

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

This approach maintains consistency with your Tailwind theme while providing the precise calculation needed.

Solution 3: Custom Utilities in Tailwind v4

Tailwind v4 introduces the @utility directive for creating reusable calculation utilities:

@utility h-screen-minus-* {
  height: calc(100vh - var(--spacing) * --value(integer));
}

@utility w-screen-minus-* {
  width: calc(100vw - var(--spacing) * --value(integer));
}

Usage examples:

<div class="h-screen-minus-7">100vh - h-7</div>
<div class="w-screen-minus-12">100vw - w-12</div>

Solution 4: CSS Variables for Dynamic Values

When you need dynamic values (especially with frameworks like Vue or React), use CSS variables:

<div 
  class="w-[calc(100%-var(--offset))]" 
  style="--offset: 2rem;">
</div>

Or define variables globally:

:root {
  --offset: 2rem;
}

Advanced: Flexbox Calculations

For complex layouts involving gaps in flex containers, you can extend Tailwind's theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      flexBasis: {
        '1/3-calc-6': 'calc((100% - 2 * theme("spacing.6")) / 3)',
      }
    }
  }
}

Usage:

<div class="flex gap-6">
  <div class="basis-1/3-calc-6">Content</div>
  <div class="basis-1/3-calc-6">Content</div>
  <div class="basis-1/3-calc-6">Content</div>
</div>

Best Practices

1. Use theme values instead of hardcoded values to maintain consistency
2. Create utilities for repeated calculations rather than arbitrary values everywhere
3. Consider performance - avoid creating too many unique arbitrary value classes
4. Use modern viewport units like dvh, svh, or lvh for better mobile support:

@utility h-dvh-minus-* {
  height: calc(100dvh - var(--spacing) * --value(integer));
}

Conclusion

Tailwind CSS offers multiple approaches for using calc():

• Arbitrary values for one-off calculations
• theme() function for consistent spacing
• Custom utilities for reusable calculations
• CSS variables for dynamic values

Choose the method that best fits your use case, keeping maintainability and performance in mind. For most projects, combining arbitrary values with theme references provides the best balance of flexibility and consistency.

VERSION COMPATIBILITY

The @utility directive is available in Tailwind CSS v4. For v3, use the traditional @layer utilities approach instead.