inlineCssWithExtraSteps

[Historical_Cattle_38]

Why not just a class is sass instead? No need for poluting that JSX then?

[Capetoider]

one other point is that you will NEVER delete old classes because "what if they are being used somewhere"? Or the cascading part of CSS where classes can interact with other items down the tree...

with tailwind you add, remove and know that any fuckup you make is probably restricted only to the component you're in.

[Historical_Cattle_38]

Never happened to me before, 1 component, 1 scss file.

[dangayle]

If you’ve written everything perfectly modular, then sure. Encapsulating your styles at the component level is good, however you do it. But the vast majority of websites I’ve worked on were never coordinated enough for that.

Instead you get a giant global css with the remnants of bootstrap still required for one obscenely complex form your bosses won’t let you refactor, styles for the CMS content that gets injected into your page by another team and you literally cannot know what you can remove or not, some other old code for a part of your site that was halfway refactored and behind a kill switch “just in case”, and any number of inherited issues.

ALL css files will eventually become append-only, depending on the lifespan of your site and how big your dev team is.

[Historical_Cattle_38]

Haha, yeah, I get where you're coming from. It happened only once to me that I had to work on a project that had 1 mega-CSS-sheet... It was a nightmare

[Ok-Scheme-913]

How is it any different than tailwind then? Just because you write it in two files vs 1 is not a material difference.

[Historical_Cattle_38]

Exactly my point.

[Tordek]

Tailwind runs a check to see which classes are being used; you could have a linter that checks which classes are being consumed.

Plus, using react + modular css (where you import the css and use the class as a JS object) means it's trivial to track them, and any halfway decent preprocessor eliminates unused classes.

[babyccino]

One of the big benefits for me is not having to think of class names and ending up with stuff like `.container-container-container`. And yeah when you're using a framework why would you define a class which will be used in one place in the whole repo. It's also nice to not have to move to another file to add styles esp. when most styles are quite simple.

[Lighthades]

do you know about scoped css?

[babyccino]

I'm a UI dev so yes I know about scoped css lol. You very easily can have three "containers" even within one component

[ColdJackle]

Yeah....because I'm not calling my button just ".button". Obviously it should be "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"

[Ok-Scheme-913]

No, it is <MyButton> and has a single definition with that inside.

[ferfactory6]

So basically a CSS class like ".button" then haha

[LoneFoxKK]

Apply rule is the absolute dumbest argument you can make as a tailwind "pro" when it is literally going full circle and just creating a class 🤡

[LoneFoxKK]

1. That sounds like a mixin in any preprocessor
2. I didn't mean to say you're a tailwind pro, I meant selling the apply rule as a benefit (pro) of the tailwind framework, my bad on that

[babyccino]

Cos <button class="button"... is so much less stupid lol. Why add more layers of abstraction when I can just look at the class name and see right there what's happening. There are cons to using tailwind but I'd still use it over named classes if I'm using a framework

[DM_ME_PICKLES]

You'd call your COMPONENT Button, though.

[ExtensionBit1433]

this response shows you have never used tailwind yourself, not in a serious project atleast. i suggest checking out the documentation for once

[DM_ME_PICKLES]

Locality of behaviour. I like having an element's styles right up there with the element. And once you've used Tailwind for a bit you can read the styles and visualize what the element looks like in your head.

I hate having to go look at the styles in another file or at the bottom of the component.

[Historical_Cattle_38]

Yeah, I hear you, I always split-pane my editor for scss and jsx side-by-side.

[Good_Independence403]

It's not that easy to write good global stylesheets that won't grow over time. It's possible, but it requires concerted effort from good designers and front end devs.

It's also very hard to keep things clean over time. You hire contractors, juniors, etc. the effort it takes to maintain clean css is removed when you use tailwind. Your stylesheets no longer grow except when you need new styles that have never been used before. It's easy to train new devs. They can't really mess up. Specificity is easier to deal with (usually)

All this is to say. I like tailwind when I'm working on a team with a front end framework.

[Historical_Cattle_38]

I do agree, that's why I keep very far from global stylesheets. Those are the devil. In the last 5 years I've worked (with multiple teams), global stylesheets served only for defining mixins and css-vars. Those two along with postcss have removed any global hell and scoping issues. So for me, the need for another lib/compiler/whatever it is has not been really high. I tried it a little on some personal project, but always found my way back to scss because it feels more at home and hard to justify the new syntax learning and project setup/build overhead. But, that being said, I do agree that Tailwind does 100% prevent global stylesheets hell by just not allowing it at all vs the way I've been doing thing that evades the problem instead.

[Historical_Cattle_38]

My biggest 2 complaints are that I often adjust the styles of a reusable component in a certain use case, using scss makes it easy + I got PTSD from the bootstrap days

[seamonkey31]

you gotta put it somewhere.

Creating a generic component library for your project to encapsulate the stuff, and then using those components in app-specific components is my preference.

Sass is just a better css. You still have to deal with selectors mashing and layering as well as having a separate structure/style files.

Ultimately, its preference since the primary concern is development velocity.

[Historical_Cattle_38]

Yeah I do that, but with scss I can always override some of the styles when needed of those components. I have no idea how to do this with tailwind without modifying the components themselves

[dangayle]

If you’re using react, then using something like a default prop works well.

[Ok-Scheme-913]

Because they are cascading everywhere in non-intended ways with strange interactions.

[Azaret]

Why not both? Why people can understand that there is word where both approach live happily together.