Hacker News Reader

Comment by ereveles | Hacker News Reader

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

View on HN

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