4 ms·
Why not use both? twin.macro is an excellent library that compiles Tailwind (and adds additional, useful variants) in systems like Styled Components and Emotion
by docmars 5y ago
Why not use both? twin.macro is an excellent library that compiles Tailwind (and adds additional, useful variants) in systems like Styled Components and Emotion, so you gain the benefits of quick component creation, but the same pleasant maintenance of colocating utilities and styles/classes/objects composed of these utilities with your components.
It's been an absolute dream in a decent-sized project so far, and even with some refactors.
Regardless, it's not everyone's cup of tea, but depending on the UI framework of choice and the flavor of CSS you use, YMMV when it comes to dev experience.
In Vue or Svelte, I wouldn't even use a CSS-in-JS solution because vanilla Tailwind to compose utilities into localized classes is a straightforward approach.
- slantyyz 5y agoIf you're using Svelte, you don't really need Tailwind (but are obviously free to use it), especially if you're using your own components. Svelte's styling is already pretty atomic as it is. With Svelte, I use a small global reset, and a global file containing native CSS variables (which I reuse across multiple projects). Most of my Svelte CSS is component specific (and in most cases, no classes are even necessary) and they can be themed by simply referring to the CSS variables in my global variable file.
- docmars 5y agoNice! This reminds me of Pollen: https://www.pollen.style/ https://www.pollen.style/
- slantyyz 5y agoYes, it's very similar to that. I looked at Pollen a while back to see if there were any ideas I missed, but while Pollen has a different approach to variable naming, it was very similar to what I do.