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?
btn btn-primary
btn btn-lg btn-primary
Millions of developers already know bootstrap, so worth sticking to that.
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
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.