How to Use Calc() in Tailwind CSS

How to use calc() in tailwind CSS?

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

Using a theme value inside the calc of an arbitrary value in tailwindcss

To use tailwind config values in CSS use theme function provided by Tailwind. Example usage of theme in CSS:

.content-area {
  height: calc(100vh - theme(spacing.12));
}

So this is how your statement would look like:

h-[calc(100vh-theme(height.navHeight))]

Also if you have whitespace in arbitrary Tailwind values they won't work.

How to position an element to use the remaining space of the screen without overflowing it [TailwindCSS]

The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.

.h-screen{
  height:calc(100vh - 2rem)!important;
}

https://jsfiddle.net/c28145au/

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Tailwind CSS class w-full xl:w-3/6 doesn't work at xl breakpoint

Use

class="w-full xl:!w-3/6"

Here we apply the important modifier in tailwind CSS inorder to override the default behaviour of the class w-full

From the docs...

The ! always goes at the beginning of the utility name, after any
variants, but before any prefix:

<div class="sm:hover:!tw-font-bold">

This can be useful in rare situations where you need to increase
specificity because you’re at war with some styles you don’t control.

Parse Error When Trying To Use theme() Inside calc()

It turns out it was an issue in my tool chain. Specifically, I was using the node package postcss-cssnext - which it turns out is deprecated. Once I removed this from my Gulp file, the error went away:

---

Related Topics