> Currently I use Vanilla-Extract, it's like SCSS but uses TypeScript instead of the SCSS language. It also compiles down into native CSS, so there's no runtime overhead like styled-components, emotion, etc.
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.
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.