Tailwind CSS v3.0

Post by aniforprez » Fri, Dec 10, 2021, 10:52 AM UTC

winstonewert wrote: post #317

commanderkeen08 wrote: post #238

Every time Tailwind does something great and gets posted here, the conversation devolves into the same arguments: “I don’t get it. It’s just inline styles.” What is it about CSS that gets people so offended and opinionated? If it were a new JS framework, few people would be saying “I just don’t get XYZ. Use React”. Is it because Tailwind is so drastically different and breaks people’s core ideas about separation of c…

For me, the situation is: I gave tailwind a try. I hated it. I spent a lot of effort of ripping every last tailwind class out of my project. And yet, a lot of people swear by it and think its great. This really confuses me, and I'd kind of like to understand: how can other people like this thing that I think is terrible?

Post by ratww » Fri, Dec 10, 2021, 11:17 AM UTC

stanislavb wrote: post #315

aaronbrethorst wrote: post #277

Earlier quoted context omitted.

I use Tailwind utility classes extensively to create reusable components in a Rails app using GitHub's ViewComponent gem ( https://viewcomponent.org ) Occasionally, I'll use @apply directives to DRY up something that isn't easy to encapsulate at the component level, but 95% of the time, I can easily get by with utility classes. I try to avoid using hyperbolic-sounding language like 'revolutionized,' but Tailwind + Vi…

Thanks mate! I've been considering this path and may give it a go. Although, I'm still a bit nervous spitting utility classes all around. That sounds almost like inline CSS and almost unmaintainable.

Post by rattray » Fri, Dec 10, 2021, 11:42 AM UTC

jeremyjh wrote: post #297

JasonCannon wrote: post #175

Earlier quoted context omitted.

>This works okay in extremely componentized web apps. It's a nightmare if your UI isn't highly componentized. I've seen projects where you make a button by copy pasting this ~80 character string of tailwind classes all over the place, and then changing the color names if you need to. Good luck fixing that when the designer decides that we don't want any buttons to have rounded corners anymore. That app is done wrong.…

Yes, there is a right way to do it. But in the code I've seen in the wild, people are often not doing it right and those 80 char strings of utility classes are on the low side compared to some of what I've seen. I'm skeptical of Tailwind not for its own sake but because a lot of (most?) shops do not have the discipline to use it effectively. And what you are arguing here is basically a no true Scotsman defense.

Post by lewispollard » Fri, Dec 10, 2021, 12:00 PM UTC

lhorie wrote: post #247

dqv wrote: post #239

Earlier quoted context omitted.

Looks like Tailwind has an answer to this: @apply. https://tailwindcss.com/docs/reusing-styles I am going to give it a try. The argument against using it is that it defeats the purpose of Tailwind, but I think its useful to start by spraying classes until things work and then moving those classes into e.g. btn-primary once the styles become stable and need universality.

Yes, @apply exists, but is generally discouraged (and the rationales are given right on that page) > If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you Approaching it with moderation is probably worth trying though

Post by montroser » Fri, Dec 10, 2021, 12:27 PM UTC

reactor wrote: post #294

montroser wrote: post #246

Earlier quoted context omitted.

No, we don't want all of the buttons to look identical. Some are big and some are small; some are bold and primary and some are muted and secondary; some have icons; some have shadows; some are disabled, etc, etc. It's easy to make them identical. The challenge is to be as flexible as necessary in a mature application, while minimizing verbosity and complexity. In my experience Tailwind hurts more than it helps here.…

How would you have done it without TailWind? You'd still have to create classes for each of them in plain css anyway, except it would probably be in a different .css file. The inherent complexity pertaining to your app is not taken away, it just moved the places.

    Edit

    .btn {
      ...default button styles
    }

    .btn.large {
      font-size: larger;
    }

    .btn.shadow {
      box-shadow: 0 0 8px #0004;
    }