Feature Proposal: Square/Size utility

[hugovntr]

Hey 👋

So I often find myself using the width and height utility to create square-shaped elements, typically when using SVG icons or displaying profile pictures.
As a lazy dev, I extended the default tailwind config to add a square/size (not sure about the name yet) utility class.

plugins: [
    plugin(function ({ addUtilities, theme, variants, e }) {
        const squareUtilities = _.map(theme("width"), (value, key) => {
            return {
                [`.${e(`s-${key}`)}`]: {
                    height: value,
                    width: value,
                },
            };
        });
    
        addUtilities(squareUtilities, variants("width"));
    }),
]

Turning this:

<div class="w-6 h-6">...</div>

Into this:

<div class="s-6">...</div>

While adding this utility to all of my current projects I taught that I could not be the only one that would enjoy having this by default in Tailwind.

Another thing is that it could either be defined as a core plugin, meaning we could change the configuration via the tailwind.config.js or use the values of the height/width (like I did in the snippet above)

[hugovntr]

While browsing the source code, I found out about the spacing configuration. The utility can then just use this config instead of the width/height values which include percentages and can result in unexpected behaviors