Use the size- utility in Tailwind for cleaner sizing

When you want a square element in Tailwind, you might write both width and height:

<div class="w-16 h-16 bg-blue-500"></div>

But Tailwind has a shorthand: size-.

It sets both width and height at the same time:

<div class="size-16 bg-blue-500"></div>

This keeps your classes shorter and easier to read. Perfect for avatars, icons, or any element that should always be square.

Learn all about the size- utility in the Tailwind CSS documentation.