JAVASCRIPT

tailwind css calc

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

// jit should be enabled in tailwind.config.js
module.exports = {
  mode: 'jit',
  ....
};

How to use calc() with Tailwind CSS

<div class="bg-red-500 w-24 h-[calc(100vh-36px)]"></div>
<div class="bg-red-500 w-24 h-[calc(100vh_-_36px)]"></div>

tailwind calc

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

tailwind calc

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