Setting custom max and min height or width in Tailwind CSS

Question

I know in CSS, you can set the min-height and max-width but when I try min-h-10 and max-h-10 it doesn't do anything in Tailwind CSS.

And this is what I have:

<div class="flex-col justify-center">
    <div class="h-10 w-10 border bg-blue-300 block">
        h
    </div>
</div>

Answer 1

Values like min-h-10 and max-h-10 aren't valid values in Tailwind CSS, the only valid values are min-h-0, min-h-full, min-h-screen, min-h-min, min-h-max, min-h-fit.

So, the only way to use values like min-h-10 is by using custom values where you can customize your min-height scale by editing theme.minHeight or theme.extend.minHeight in your tailwind.config.js file like take the following example.

Your tailwind.config.js file:

module.exports = {
  theme: {
    maxHeight: {
      '10': '10px',
    }
  }
}

Your HTML:

<div class="max-h-10 w-32 bg-red-400">
  I'm an element!
</div>

See the playground

Or if you need to use a value once that doesn’t make sense to include in your theme, you can use arbitrary values like below:

<div class="max-h-[10px] w-32 bg-red-400">
  I'm an element!
</div>

See the playground

In my answer, I've only used examples for max-height and min-height but it doesn't differ anything from min-width and max-width.