Comment by docmars | Hacker News Reader

Comment by docmars | Hacker News Reader

Parent Full thread

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! :)

+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.

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}
  />

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

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.

Reply on news.ycombinator.com