Custom Height in Tailwind

Tailwind provides you with heights that you can use out-of-the-box. However, if you want to use heights not available in the Tailwind docs and more specific heights, then you need to set your custom height. Here’s how to do it.

Go to tailwind.config.js.

module.exports = {
  theme: {
    extend: {},
  },
};

Inside the extend key add the heights that you want to use like:

module.exports = {
  theme: {
    extend: {
      height: {
        208: "208vh",
        45: "45rem",
      },
    },
  },
};

Now in your class, you can use heights like

<div className="h-208"></div>
<div className="h-45"></div>

and you should get the respective heights. This is how you set custom heights in Tailwind.

If you want more tutorials like this or have questions about this tutorial, follow me on Twitter. Also if you want to receive it in your email, subscribe to the newsletter! Thanks for your time!