DEV Community

Discussion on: Tailwind is bad because i don't like it

Collapse
 
tontonsb profile image
Džuris

He mentions that you will write bg-blue-500 instead of bg-primary-500, sure if you're braindead and don't have even the slightest idea of how to write maintainable utility classes.

In practice there are two problems with these. First off, bg-primary-500 means there's still 10 or so variants. Normally I would only want a couple at most, the rest only make room for inconsistencies. That's why I prefer having a single file of CSS variables where all the available colors are defined and the palette is kept to a reasonable minimum.

Secondly, all that formatting is hardcoded in the markup. For example, there's the Jetstream and Breeze frontend packages for Laravel. And the styles for all the components are defined within those components. If I want them to comply with my stylesheet I can't just update .btn.btn-primary and .form-control like we can in CSS kits. You have to either go into all of the components and change them or you have to change what .text-red-600 does. But what if another package has defined a similar button with .text-maroon-700? Do you redefine .text-red-600 and .text-maroon-700 to both be light orange?

Collapse
 
neophen profile image
Mykolas Mankevicius
  1. bg-primary-500 means there's still 10 or so variants - you can limit it to whatever is good for you, that's what the config is for, you can disable all colors and only have the ones you need in your design system.

  2. All that formatting is hardcoded in the markup. - You are correct, and this is an actuall problem with Tailwind and themes. I don't think tailwind is well suited for packaging, which is mean to be re-used and customized. The tailwind UI, is a perfect example, you will have to change the classes to match your config/style and make your own components out of them. They provide Vue/React and some other framework, but it will require work to match your design.

Collapse
 
neophen profile image
Mykolas Mankevicius

But what you have done here is move the goalpost.

Neither me nor Brian talked about using external themes/components.

And i still think this is just as difficult with themes/components. Because you have to understand/find the classes. And while it's fine for something like button. It becomes much more difficult to manage, the more custom things you want with the theme/template/components.

At least with jetstream you can see all the components and see how their styles need to change.
Also you know you can search within specific folders right?
What I would do in this case is change the -red- with -primary-. Jetstream doesn't have that many components.
And then if you add another package you do the same change there.

What you do not do is change the meaning of -red- or -maroon-.

You say just change .btn.btn-primary why is that better than just change XButton.vue component.

Some comments have been hidden by the post's author - find out more