DEV Community

loading...

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

Collapse
neophen profile image
Mykolas Mankevicius Author • Edited

Ok let's change it, and for the sake of your argument keep it simple, the class is in the component style.

<div :class="{ 'padded': padding }"></div>
Enter fullscreen mode Exit fullscreen mode

First you have to come up with a name padded.
When on comming back to edit this, you have to find out what it means.
Now you have to scroll down/search and find this class in the component;

<style>
.padded { 
  padding: var(--spacing-lg); 
}
</style>
Enter fullscreen mode Exit fullscreen mode

Even now you don't know what this means. it could mean anything 0 10px or 10px or 10px 0 or even 1px 2px 3px 4px

So you have to find another varianble (which you had to name) --spacing-lg and only then you see what it means.

So:

  1. You have to do a lot of jumping around to figure out the actual meaning.
  2. You have to come up with meaningfull most likely undocumented names.
  3. You have to be carefull with reusing this class in the same component.

And there are more issues.
What this class is defined globally?
What if this class depends on a parent class?
What if you only want to change the spacing here?
What if you reused this class in the same component? (Remember i've pointed out that this is quite a simple component, How do you change it only in one place?

You see how much more work that is, rather than seing px-6 and if need be updating it to p-6 because the design changed?

And maybe for you it's Clean, readable, consistent. and you're fine to live with that complexity. For me it's all over the place, so not clean. Not readable since you have to jump around to actually read it. and not consitent as you might use padded here and another class in a different place. You can even be lazy and just add extra things to the padded class. So i personally don't see any of that Clean, readable, consistent. in your proposed solution.

What Tailwind does here, is solve all of those issues:
.px-6

  1. Means the same everywhere.
  2. With a plugin you can see the meaning right there, without it you can search the documentation.
  3. Re-usable you can reuse this all over the place knowing it means the same. And yes it will be more verbose as you will need more classes to achieve more intricate designs. But the above arguments still stand.

And sure you might not see it the same way. So we can agree to dissagree what is more Clean, readable, consistent.