4 ms·

Aside from all of this. Try to use tailwind for 1 side project. You’ll see the difference of productivity when you remember most of the tailwind classes as oppo

Aside from all of this. Try to use tailwind for 1 side project. You’ll see the difference of productivity when you remember most of the tailwind classes as opposed to having to open another css file, create a class, then reimport them. I just can’t go back without tailwind.

danielvaughn 5y ago
I used Emotion for a few years (CSS-in-JS). I was so in love with it that I never thought I'd change to something else. But Tailwind converted me. I can't go back either, it's too powerful.
- docmars 5y ago
  You can use both and gain the benefits of Tailwind-in-JS to dynamically apply utilities and arrays/objects of utilities composed together, all using a nifty wrapper library called "twin.macro". It sits on top of Styled Components or Emotion (your choice), and uses your project's Tailwind config faithfully, minus a few of the plugin features. It eliminates the need for JIT or PurgeCSS because it compiles Tailwind's utils with a drop-in Babel macro, eliminating the need for PostCSS. As a lover of vanilla Tailwind in Vue and Svelte projects, Twin Macro has made using it in React 10x better and I haven't looked back! :)
  - ereveles 5y ago
    +1, tried Tailwind and liked it, but when I found I was able to use CSS-in-JS with it with twin.macro i was amazed. Now is used on all my side projects.
    - danielvaughn 5y ago
      Just checked it out, looks nice. What I'd really like is a more concise way to apply tw classes in jsx. Something like this: <Button h5 w6 bgBlue500 textWhite hidden={props.hide} />
    - emptysea 5y ago
      I'm curious how that would work with typescript since it's adding extra props like `css` and `tw` to components which don't exist in the types
      - docmars 5y ago
        It's Typescript-friendly, and if you use the Twin Intellisense extension for VSCode, it will autocomplete from all of the generated utilities in Tailwind, even the ones created from your own configuration of colors, spacing, etc. Twin Macro has a few snippets of type definitions you can add to your project based on whether you're using Styled Components or Emotion, specifically to support these two props (tw and css). They link to their Examples repo from the official readme with several projects using many different combos, with a handful of TypeScript ones.

danielvaughn 5y ago

I used Emotion for a few years (CSS-in-JS). I was so in love with it that I never thought I'd change to something else. But Tailwind converted me. I can't go back either, it's too powerful.

docmars 5y ago
You can use both and gain the benefits of Tailwind-in-JS to dynamically apply utilities and arrays/objects of utilities composed together, all using a nifty wrapper library called "twin.macro". It sits on top of Styled Components or Emotion (your choice), and uses your project's Tailwind config faithfully, minus a few of the plugin features. It eliminates the need for JIT or PurgeCSS because it compiles Tailwind's utils with a drop-in Babel macro, eliminating the need for PostCSS. As a lover of vanilla Tailwind in Vue and Svelte projects, Twin Macro has made using it in React 10x better and I haven't looked back! :)
- ereveles 5y ago
  +1, tried Tailwind and liked it, but when I found I was able to use CSS-in-JS with it with twin.macro i was amazed. Now is used on all my side projects.
  - danielvaughn 5y ago
    Just checked it out, looks nice. What I'd really like is a more concise way to apply tw classes in jsx. Something like this: <Button h5 w6 bgBlue500 textWhite hidden={props.hide} />
  - emptysea 5y ago
    I'm curious how that would work with typescript since it's adding extra props like `css` and `tw` to components which don't exist in the types
    - docmars 5y ago
      It's Typescript-friendly, and if you use the Twin Intellisense extension for VSCode, it will autocomplete from all of the generated utilities in Tailwind, even the ones created from your own configuration of colors, spacing, etc. Twin Macro has a few snippets of type definitions you can add to your project based on whether you're using Styled Components or Emotion, specifically to support these two props (tw and css). They link to their Examples repo from the official readme with several projects using many different combos, with a handful of TypeScript ones.