[naught0]

> without having to scan through dozens of your components looking for a pattern

Wouldn't you have to scan disparately located CSS files anyway? How many projects have you seen with nonsensical or clobbered classnames or conflicting rules?

Really for a lot of designs I think you can just eyeball it. If `px-4` looks about right, then use it. Otherwise you can find a similar component and hijack the exact padding if you want, or get it from the design.

You probably think @apply makes more sense because you know and like traditional CSS. You want to apply tailwind classes and condense them into a single reusable one. Tailwind asks you to think in a different way. The classes are aptly named (mostly) and granular (one class per css directive), so my knowledge of CSS felt very transferable.

  <LinkButton4 />

Imo should be

  <LinkButton variant={"homepage"} />

Leveraging something like Class Variance Authority or more simply:

  <LinkButton className="text-xl other-override-here" />

Using tailwind-merge

I have found tailwind to be indispensable, and it pairs particularly well with React.

[jacobyoder]

Again, at least part of the core issues I have is coming in to other projects where each person thinks in a 'different way'. And almost all of them are simply copy/pasting loads of tailwind extended strings of stuff, then semi randomly tweaking until something looks 'ok', then moving on.

> scan disparately located CSS files anyway

usually, I encounter CSS in one of two ways:

1. a main base css file or set of files (from a framework, maybe), and then an override css file. Single override file can get hairy to look through, admittedly, but it's typically in one spot. I rarely come across projects with dozens of standalone css files.

2. 'style-in-components' - primarily in vue, because vue sfc encourages scoped styling - structure, code, style in a single file. Whether that's bootstrap styling ('btn btn-primary', etc) or tailwind doesn't make too much of a difference.

Where I've hit more maintenance issues is coming in to projects with tailwind in say, react or vue - with the 'style in components' - is that "text-xs px-1 rounded-sm bg-gray-200 inline-block text-gray-600 mb-1" repeated across multiple components, is harder to find when I want to replicate something vs just "class='tooltip'"

Of course, we're all doing it wrong, and if we all just 'think different' all the time, and spend loads of time rewriting "wrong" stuff from other people - things will be just fine. But the world I live in, and the world I see a lot of people in - is not greenfield, but brownfield, and we have to live with the decisions others made. Tailwind does not make my life any easier that way, and generally introduces more cognitive overhead earlier in a project when it comes to visual stuff.