How to use calc() in tailwind CSS?

If you are using v2.x, add mode: 'jit' to your tailwind.config.js (no mode: 'jit' needed in tailwind v3)

module.exports = {
  mode: 'jit',
  ....
};

And use like this: (Without space!)

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

It will produce:

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

We can use the theme variables as well:

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

Tailwind v3 update

Now we can use an underscore _ 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>