Adding 'wh' class to set width and height at once

[iaseth]

I often have square elements in my markup where I have to write repetitive code like this:

<div class="w-4 h-4"></div>
<div class="w-[5px] h-[5px]"></div>

It would be nice if I could set height and width at once:

<div class="wh-4"></div>
<div class="wh-[5px]"></div>

wh, hw or sq could be good prefixes for this.

[adamwathan]

Agree I've wanted to do this forever just never been able to get excited about any of the API ideas.

There's an old discussion about this in the working group where a size property was pitched:

w3c/csswg-drafts#820

[courdek]

+1 for sq. Would love to have this built in but was also easy enough to add with a plugin, which i've done here https://www.npmjs.com/package/tailwindcss-shapes

[JClackett]

Would love this, especially for breakpoints!

This w-10 h-10 sm:w-12 sm:h-12 lg:w-16 lg:h-16

becomes sq-10 sm:sq-12 lg:sq-16

so annoying having to maintain square shapes haha

[iaseth]

I was happily surprised to see that this was added:

https://tailwindcss.com/docs/width#setting-both-width-and-height