DEV Community

Discussion on: Is the Tailwind approach a big step forward for CSS or just-yet-another-thing?

etienneburdet profile image
Etienne Burdet

It's very fast for solo building, but I have my doubts for long term maintenance, especially in a team.

If you don't use a some sort of component based approach, when you need to change the padding of every type of card, you're good to find them all by hand.

Even if you do code in components, some might be different but inherits common properties—cards padding still is the good candidate. Then again, you are good to find them all by hand, with no guarantee that everything with px-4 is a card.

And when coding components with scoped styles (Vue/Svelte…), I hardly use classes at all anyways, even utilities. Selectors are most often tags or ids. Values are either obvious, either some gobal variables.

Now the problem of coding in component has been known for years and is mostly tackled since bootstrap popularized it—altough… surprises. The problem of overall coherence and DRYness is solved with global settings and global classes as popularized by… yeah Boostrap.

I actually often end up rebuilding my little Boostrap from the bottom up everytime. First, do things in components with stupid selectors. Then, whenever you feel you are repeating yourself (colors, spacing, global class…) create a global class or variable. And voilà. It's just as fast, but much more guaranted to be coherent. I guess that makes me in the Sass camp?

Last one for the road: one more config file!🎉 _package.json, eslintrc, webpackconfilg, nuxtconfig, now/firebase _… and now tailwindconfig with it's very own fleet of arrays. Who said convention ? 😇