DEV Community

Discussion on: TailwindCSS: Adds complexity, does nothing.

Collapse
 
jedashford profile image
Jed Ashford • Edited

For us web dev isn't massive part of our business and kicking media queries into the dark abyss was satisfying when moving to tailwind.

A few things.

  1. Tailwind-jit solves most of the concerns you listed with chaining, exact colors and values, etc. This should be a must and they're trying to get merged into the main project.
  2. Using Sass, we can compile tailwind into css classes. So you get the best of both worlds.
  3. Even senior devs appreciate anything like tailwind 'container' that does all of the calculations for you. Many of the classes provided are more powerful and easier to use than pure css. Plus you don't need to choose one or the other cause you can use both.
  4. How often are you rewriting styles across your website that you must have global css? Any of that is already externalized to the tailwind.config file. I've never rewritten a site/pages without having to start over with new html and css. Just comes with a redesign.
  5. Media queries are a thing of the past. So many abstracted queries across the project. min-width? max-width? Which way does that go again? Not explicitly defined in the html, so you're left guessing often why your css changed. All these queries are gone often with a simple sm:flex class and it lives with the html it alters. This is by far the most powerful and follows the proximity principle of development.

I wish you luck, always fun to learn something new and see how the community can alter development.

Collapse
 
kerryboyko profile image
Kerry Boyko

Interesting.

I would say that even if web dev isn't a massive part of your business, then why would you want to deal with Tailwind anyway? You're not really skipping out on the bulk of complexity of CSS, you're just writing CSS using an alternative syntax that maps 1-to-1 to actual CSS. It doesn't make it any easier.

Compare that to something like Bootstrap, which does make things like breakpoints, media queries, etc. easier. Yes, it's more opinionated, and "bootstrap sites look like bootstrap," but if web dev isn't a massive part of your business, then that's all you need.

And while you can compile tailwind into CSS classes (with either Sass, as you mention, or @apply) -- why would you want to? Why not just write the class directly, skip the middleman?

As for "container" - yes, it's easier to write 'container' than it is to fix max width at all media queries... the first time. But once you've done it once, it's easier to reuse. Now, if Tailwind were just a collection of commonly used CSS utility classes, I'd say that it has value, but "container" is a massive exception to the rule. 99% of tailwind is just one-to-one mappings of CSS properties.

In fact, I'd be surprised if someone hasn't written a very stripped down version of Tailwind that is just a single CSS file with "container" and one or two other cherry picked utilities. If they haven't, I might write it myself.

How often are you rewriting styles across your website that you must have global css?

I work at a consultancy. The answer can be "very," depending on the client's whim. But aside from that, the main reason I might rewrite a style is because it's a bug fix, and in that case, I'd rather have to fix the bug in one place rather than fix it in 100.

Media queries are a thing of the past.

Yes, but it's not like Tailwind invented the 760 grid system. If all you want is to avoid writing media queries everywhere, there are already tons of great libraries for doing that.

My problem isn't that there aren't some examples of good code out there in Tailwind. My problem is that it's 99% bad code, and the 1% of good code has been done, better, elsewhere.