Add max-h-[0-9-xl] utilities #1374

soullivaneuh · 2020-02-09T15:09:42Z

Basically, the same thing than that: https://tailwindcss.com/docs/max-width/#app

But for height.

I might add it on a tailwindcss config file, but I'm working on an open-source svelte library based on Tailwind, and I would keep the strict default config to be flexible.

This will be useful to set the max height of a dropdown. Currently, I have to do this:

.list {
  max-height: 16rem;
}

hunzaboy · 2020-03-03T08:57:24Z

You can use the height on the parent and then use max-height in the child.

h-64 = 16rem;
e.g

<div class="h-64 list">
  <div class="max-h-full ...">
    max-h-full
  </div>
</div

kyleoliveiro · 2020-03-25T01:05:40Z

You can use the height on the parent and then use max-height in the child.

h-64 = 16rem;
e.g
<div class="h-64 list">
  <div class="max-h-full ...">
    max-h-full
  </div>
</div

In that case the parent will occupy more space than intended if the child is shorter than 16rem.

tailwindcss / tailwindcss

Add max-h-[0-9-xl] utilities #1374

Add max-h-[0-9-xl] utilities #1374

soullivaneuh commented Feb 9, 2020

hunzaboy commented Mar 3, 2020 •

edited

kyleoliveiro commented Mar 25, 2020

tailwindcss / tailwindcss

Join GitHub today

Add max-h-[0-9-xl] utilities #1374

Add max-h-[0-9-xl] utilities #1374

Comments

soullivaneuh commented Feb 9, 2020

hunzaboy commented Mar 3, 2020 • edited

kyleoliveiro commented Mar 25, 2020

hunzaboy commented Mar 3, 2020 •

edited