In my case, tailwind was useful for providing a handy set of vocabularies for simple and common stylings. But once customizations start to pile on, we're back into SCSS. Using 2 systems at once meant additionally gluing them with the postcss toolchain, so effectively we have 3 preprocessors running for every style refresh.
Looking in at TypeScript from the clojurescript ecosystem though, I'm still yet to see an equal to https://github.com/noprompt/garden or https://github.com/Jarzka/stylefy: single language, excellent composability, compile-time anonymous class names, inline styles... almost like they solved CSS (except for typing)
that said, tailwind's and SCSS's VS code integration is pretty amazing.
So then everything goes through a single system.
https://github.com/homebound-team/truss
> tailwind's and SCSS's VS code integration is pretty amazing
We get that too, by being just vanilla TypeScript, no editor-specific integration necessary. :-D
(I've linked to Truss in another response, so will stop now. :-))
I like Vanilla-Extract! Didn't wanna add to the article by talking about it and other alternatives I tried.
It solves the main two problems I encountered with Tailwind CSS by offering type-safety and low learning curve since you're mostly writing vanilla CSS.
However, some of its issues are:
- Isn't as widely supported as Tailwind CSS since it's exclusive to TypeScript (cannot use it in Laravel)
- Requires a special integration with each framework (couldn't use it with Remix.run)
- There's a runtime overhead when you use it inline via its Sprinkles package. Without it, you're back to thinking about class names and having your CSS in a separate file which I personally found not to be neither the most productive nor the most maintainable approach.
That being said, Vanilla-Extract author has recently Joined Remix.run and I hope they address some of these points soon.
https://vanilla-extract.style