min-size-[*] & max-size-[*] Minimum and maximum utility classes for size

[Kaljuk]

Referencing the discussion about size-[*] utility class

It would be convenient to use min-size and max-size in addition to just using size.

Comparison: min-h, max-h, min-w, max-w VS min-size & max-size

<div class="min-h-10 min-h-10 max-h-16 max-w-16">
  Content
</div>
<!-- VS -->
<div class="min-size-10 max-size-16">
  Content
</div>

[adamwathan]

Can you give a real world example of where you'd need this? Not opposed to adding it if there's a good practical use case 👍

[Kaljuk]

One semi-real world example would be, when limiting visual elements between certain widths and heights - mainly circles & rectangles.

i.e. I'd like to create a component/element which draws circles in a defined range, but I'd like to comply with the visual guides, which might not allow them to be larger than 240px. When adding a random height & width and mobile aspect to it, I'd need to limit the maximum and minimum values further.

Example of a component, where I'd set the max & min size of the circles, which would keep the compliance with brand guidelines when changing the size of the circles in the future.

[Kaljuk]

Another practical use would be, when placing icons inside a table cell.
When the cell content expands due to dynamic content - the icon might get mushed up - which shrinks it.
One solution for this issue is setting min-h & min-w for the icon - where the min-size would also come in handy as the icons containers mostly have the same aspect ratio.

[babakfp]

Hey 👋

My real-world example:

::-webkit-scrollbar {
    @apply h-2.5 w-2.5;
    &-thumb {
        @apply h-12 max-h-[40%] w-12 max-w-[40%];
    }
}

If the suggested feature gets added, I can refactor it to:

::-webkit-scrollbar {
    @apply size-2.5;
    &-thumb {
        @apply size-12 max-size-[40%];
    }
}

---

Another one:

<IconChevronRight class="max-h-2 min-h-2 min-w-2 max-w-2" />

I think the reason that I wrote it like this, is because the icon was getting shrunk down.

[dustessavdh]

Hi
I also recently came across a use case for this. I wanted to create somewhat of a spacer using min height and width.
Currently, it would be:

<div class="min-h-28 min-w-28" />

With this change, it would simplify it to:

<div class="min-size-28" />

Since there already is a size utility, this only feels logical.

[Kaljuk]

@adamwathan Are the use cases suitable for moving forward with the idea or is it out of scope for now?

[DenisStetsenko]

For anyone wondering how to do it in 2026, you just need to add a new @utility. Easy 🤟

@utility max-size-* {
	max-width: calc(--value(number) * var(--spacing));
	max-height: calc(--value(number) * var(--spacing));
}

@utility min-size-* {
	min-width: calc(--value(number) * var(--spacing));
	min-height: calc(--value(number) * var(--spacing));
}

[ryanleichty]

Ran into a scenario today where I needed both min-width and min-height and assumed a min-size-* existed. The aspect ratio is the preferred size when the space allows it, otherwise it should fit the vertical and horizontal space when the container gets taller/wider. Rare scenario, but seems like having parity with size-* would be nice.

<div className="aspect-portrait min-h-full w-full min-w-full">
  ...
</div>