How to Use calc() in Tailwind CSS?

By Hemanta Sundaray on 2022-11-12

Let's say we have an app with a navbar & a sidebar.

Web App

The width of the navbar is 5rem. We want to set the height of sidebar as calc(100%-5rem).

Using Tailwind CSS, we can set the height as shown below:

<div className="w-60 h-[calc(100vh-5rem)]">Sidebar</div>

Join the Newsletter