Add size-[*] as a utility class that includes equal values of height and width

[StevenJPx2]

Oftentimes, when I want to make a circle or a square, I have to add the utilities h-* w-*, and when I need to change anything, I have to go back and change both to the same value.

It would be nice to have a single utility class that would add the same values for height and width.

Therefore:
size-5
is analogous to:
h-5 w-5

[DistantMe]

Not exactly what you're after, but I use the new aspect-square class to achieve this.

eg. class="w-5 aspect-square" to get a 5x5 square shaped element

[StevenJPx2]

Looks good, but seems kinda hacky compared to a more straightforward approach, right?

[StevenJPx2]

This approach doesn't work with w-screen h-screen. Just tried it. aspect-square breaks for phones.

[DistantMe]

This approach doesn't work with w-screen h-screen. Just tried it. aspect-square breaks for phones.

Works ok for me, as an example:

<div class="w-screen aspect-square bg-blue-500">test</div>

... produces a blue square which is the width of the screen.

Do you have an example of something that doesn't work?

[adamwathan]

This has come up before and I think would be a neat thing to add, the tough thing is just deciding on the API. There's already a size property in CSS that does something totally different:

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

And size-5 is only one character less than h-5 w-5. Ideas I've tossed around are s-5 and wh-5 or hw-5 but never really felt perfect.

[StevenJPx2]

The number of characters really isn't an issue because most people will be using an LSP to autocomplete it. Moreover, the initial amount of time to type down the classes really isn't the issue, it is going and changing both w- and h- values every time I want to make a change during development.

[alexanderbluhm]

Yeah naming is always so tricky.
I used the equal width and height thing as a custom plugin a few months ago and I named it square-5 ... because a sqaure has always the same width and height per definition.

[StevenJPx2]

Wow, that actually sounds good! Maybe sq-* for a shorter form?

[StevenJPx2]

This is finally implemented! Thank you @adamwathan and team!
https://tailwindcss.com/blog/tailwindcss-v3-4#new-size-utilities