Extending Tailwind CSS screen height utility

tailwindcss, css, react, selfnote


Image by Free-Photos from Pixabay

Let's extend Tailwind CSS's height (h-) utility for 50vh, 33.33333vh, 25vh, and 20vh.


You have to know what Tailwind CSS is and how to set it up yourself.


Tailwind CSS ("tailwind" hereafter) has a utility class, h-screen to turn an element to take up 100vh vertical space.

But there is no granular classes for granular heights such as 50vh, 25vh, etc.
And the Tailwind decided not to add such utilities.

The only way to do is to add a custom configuration.

Updating Tailwind Configuration

You can extend the h- utility by updating your tailwind.config.js file.
The important part is to wrap your new utility with extend.

1module.exports = {2  theme: {3    // 👇 this makes Tailwind merge the configuration w/o overriding it.4    extend: {5      height: theme => ({6        "screen/2": "50vh",7        "screen/3": "calc(100vh / 3)",8        "screen/4": "calc(100vh / 4)",9        "screen/5": "calc(100vh / 5)",10      }),11    },12  },13  variants: { display: ["responsive", "hover", "focus"] },14  plugins: [],15};

You can specify the height like 50vh (refer to screen/2) or calculate with calc (for screen/2~5).

target not found

Source Code


Image by Free-Photos from Pixabay