Tailwindcss: Combined width/height "wh-" utility classes

[ky-is]

Just getting into tailwind here; really great work! One thing I find myself repeating are classes like class="w-8 h-8". Not bad, just not DRY. Now I have 2 places to change what's really a semantically square size. So I wrote a quick plugin:

  function ({ addUtilities, config, e }) {
    const heightConfig = config('height')
    const equalWidthHeightUtilities = {}
    for (const key in heightConfig) {
      const size = heightConfig[key]
      const escapedClassName = e(`wh-${key}`)
      equalWidthHeightUtilities[`.${escapedClassName}`] = { width: size, height: size }
    }
    addUtilities(equalWidthHeightUtilities, {
      variants: [ 'responsive' ],
    })
  },

This generates classes like wh-8 (similar to mx-* et al.) that combines the two classes above into one. Wanted to see if I'm missing the obvious way to do this, and otherwise if it's something worth considering for core.

Thanks!

---

Plugin notes (in case someone uses it):

• I happened to use the height config (instead of width, which has additional class names I didn't care about)
• I don't know if it's possible to use @apply instead of duplicating all the width/height definitions (like equalWidthHeightUtilities[`.${escapedClassName}`] = `@apply w-${key} h-${key}`)

[benface]

While I can definitely appreciate the DRY principle, and I would probably use this myself in projects that have a lot of square or round elements, I really don't think this should be in the core. It adds new classes that do the same thing as existing classes, resulting in a larger file size only for the benefit of developer experience (I guess it wouldn't be a huge deal when using PurgeCSS, but there's still the possibility of duplication: .w-5 {...} .h-5 {...} .wh-5 {...}). In fact, these classes are almost components rather than utilities because they consist of two utilities (width and height). I think Tailwind's core should only provide the smallest possible "Lego pieces" that make sense.

I do think you should release this as a plugin though, and add an option for the sizes instead of automatically using the height config (although it's a nice fallback).

[ky-is]

Done https://github.com/ky-is/tailwindcss-plugin-width-height. Thanks for the input ben! I do use PurgeCSS which gets Tailwind down to a couple kb so I can live with a little duplication.

[adamwathan]

I have been considering adding this myself as well honestly because I'm almost always sizing square stuff. I see it basically like our p-4 utility vs having to do pr-4 pt-4 pl-4 pb-4, so it wouldn't be going against any of the philosophies already baked into the framework.

We'll see, I bet I'll probably add this at some point :)

[benface]

@adamwathan Are you still considering adding this? Should this issue be reopened?