[simonbarker87]

So that’s a mid blue button that gets slightly darker on hover, with bold white text, it’s got a little more horizontal padding than vertical padding and has slight corner rounding and a slight drop shadow.

And I can see all of that in context where the button is declared rather than having to go look at another file and see what everything is. Oh and I know that none of those TW classes conflict or over write any properties, unlike two in house styles.

[nprateem]

Good luck changing the style site-wide.

[onion2k]

A few points on that. First, in 25 years of front end dev at scale I can't think of a time when a site I've worked on has ever actually made a site wide change to the styling without it being a big deal. It's always a lot more work than just changing some CSS because you have to consider things like whether you actually want to change every button, what background color the buttons are sat on, what text color it has, whether the color you choose should be applied everywhere or just in dark|light mode, and so on. Site wide changes are a big deal and the actual code is a relative small part of that.

Secondly, with the componentization of web apps this is largely quite simple from a code perspective. All the other complexities remain but changing a Tailwind styled button isn't much hard than changing a CSS class.

Lastly, designers are moving to design tokens applied in Tailwind config or CSS vars. This decouples the colors from the classes and turns them into config that's exported from an app like Figma, with tools to automate that export as a git PR if you're feeling technical.

These things were hard to do. People in front end tech have thought about that and built tools to make it a lot easier.

[nprateem]

There are solutions of course. But they quickly break down when you're iterating quickly, copying in code from libraries like flowbite, etc and want to go back and restyle later.

A better approach that doesn't seem to exist would be some after-the-fact automated cleanup that could at least restructure the class list on attributes to e.g. sort class names alphabetically, replace where you copied text-blue-* instead of text-primary-* to fix issues like that, or other tools to aid refactoring.

[onion2k]

There are rules for stylelint that will reorder and dedupe Tailwind classes.

[vile_wretch]

If you need to change a style site-wide you shouldn't be using individual tw classes. Don't blame the tool for shoddy workmanship, etc.

[nprateem]

It's called iteration

[hennell]

Go into the button component change the style.

[nprateem]

I'm sorry, I'm not creating a component per HTML tag with all the possible attributes just for my design system. What a complete waste of time.

Anyway the GP said he could see everything without extra files. Which is it?

[xigoi]

Can’t do that when creating a user stylesheet.

[progx]

For this case you use components. He talks about styling one component, that should look differn.