1
3 Comments

What would you name this Tailwind CSS convenience class?

I'm creating an opinionated system of classes, to integrate with Tailwind CSS. The purpose is to help people reduce html class bloat - and to add convenience.

For instance, instead of
class="my-2 py-2 px-5 text-base bg-blue-500 text-gray-900 font-semibold antialiased"
you'd have
class="btn-md btn-blue-500"

btn-blue-500 only adds a background and generic a11y compatible text color. Perhaps I'm being too opinionated here, and should just keep btn-{size}, and let people add the two other classes themselves?

I mean, class="btn-md bg-blue-500 text-gray-900" seems fine.

Since btn-blue-500 only defines a background color and text color - which isn't necessarily specific to buttons - I considered renaming it.

I've considered dropping it to blue-500, which is pretty obscure. Also thought of blue-500-text-a11y.

Thoughts?

Which do you prefer?
  1. Drop it
  2. btn-blue-500
  3. blue-500-text-a11y
  4. blue-500
  5. Other
  6. What HTML class bloat? Stop screwing up Tailwind's utility-first class system.
Vote
  1. 2

    btn btn-primary
    btn btn-lg btn-primary

    Millions of developers already know bootstrap, so worth sticking to that.

  2. 1

    Tailwind docs suggest to use @apply for small components like buttons and write react/vue/angualr/web-components for more complex components:

    https://tailwindcss.com/docs/extracting-components

    1. 1

      Yep! I'm doing @apply behind the scenes. Providing a standard for exactly those things - buttons & inputs, then consistent-looking checkboxes and radio buttons across browsers. Already have these done, and looking to see if there are other things which would be helpful too.

      Hoping to start building some svelte components with tailwind as well.

Trending on Indie Hackers
Micro-Communities | and why you should start one too 14 comments How We Made $49 in 3 months 14 comments Technical co-founder looking to partner up 10 comments I've built Billflow to $27k MRR in 18 months. AMA 4 comments 🧐 HELP! Where do Marketers and SMM hang out? 3 comments Combine multiple newsletter into one email? 2 comments