Skip to content

Instantly share code, notes, and snippets.

@ben-rogerson
Last active April 29, 2021 12:53
Show Gist options
  • Save ben-rogerson/a60015566586ac75f8328bedfbf69df8 to your computer and use it in GitHub Desktop.
Save ben-rogerson/a60015566586ac75f8328bedfbf69df8 to your computer and use it in GitHub Desktop.
Using Emotion Styled Components with Tailwind

Answer: If you're using emotion js and keen on using Tailwind then have a look at twin.macro

@rattrayalex
Copy link

Here it says, import tw from 'tailwind.macro'; but I think this is now import tw from 'twin.macro'; since the author later created https://github.com/ben-rogerson/twin.macro (presumably based on the musings here).

@ben-rogerson
Copy link
Author

You got it :) I've replaced it with some updated info now.

@rattrayalex
Copy link

Nice! FWIW, this gist was the second result when I googled, "emotion css tailwind", hoping to find a solution like twin.macro. For some reason, the twin.macro repo doesn't come up.

@rattrayalex
Copy link

I wonder if it'd help to add "emotion" and "styled-components" into the product headline, like:

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion or styled-components) at build time.

@ben-rogerson
Copy link
Author

That's interesting - I'll update the title with those keywords and see how it goes, thanks for the feedback.

@rattrayalex
Copy link

You bet! Thanks for building twin, it looks really fantastic and I can't wait to use it. Combined with emotion, it really looks like a pretty ideal styling solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment