How can I set min-height in Tailwind?

Question

I've got an inline-block that should be at least 1 rem high but will expand if the content doesn't fit. Without Tailwind, I'd solve it the following way.

<div style="display:inline-block; min-height:1rem;">
    content...
</div>

However, the only min-h classes supplied by Tailwind are min-h-0, min-h-full, and min-h-screen. So which class should I add here to write it the "Tailwind way"?

<div class="inline-block ???">
    content...
</div>

Answer 1

There are two ways to do this: with the new just-in-time mode or by extending the config.

Using JIT

The JIT (just in time) mode generates the CSS as you need it. So instead of generating all the classes then purging unused ones, it only generates utilities as you use them. This means it's both stupidly fast and can be used to create arbitrary classes on the fly.

https://tailwindcss.com/docs/just-in-time-mode#enabling-jit-mode

Starting with v3 of TailwindCSS, the just-in-time mode will be turned no by default.

If you enable JIT, you can use these classes:

<div class="inline-block min-h-[1rem]">
    content...
</div>

The brackets denotes that this is an arbitrary value not in the config.

Extending the config

You can also add all spacing values to the min-height utilities by extending your config. Note that by extending the theme, we are not overriding any of the previous values for min-height. We're just adding new utilities.

module.exports = {
  theme: {
    extend: {
      minHeight: (theme) => ({
        ...theme('spacing'),
      }),
    }
  },
}

This means you can use min-h-4 just like normal height utilities.

<div class="inline-block min-h-4">
    content...
</div>

---

Personally, I actually use both JIT and the config extension. This means I can use arbitrary values if I want, but I also can use the normal CSS spacing values for things like min-height.