🐥 How to use calc() in Tailwind CSS

You can use any calculation in TailwindCSS provided you put them between square brackets (as explained here):

<div class="w-[calc(100%-2rem)]"></div>

Don't use whitespace in the calculation:

<div class="w-[calc(100%+2rem)]"></div>

This will create the following CSS rule:

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

If you want more readability, you can use underscores instead of spaces (as explained here):

<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>