tailwindcss + next.js + emotion.js setup

[theairbend3r]

Hi!

First off, I love the tailwind library!

I love the tailwindcss + nextjs setup given in tailwindcss/setup-examples.

I was wondering if that example can be extended to use emotion.js too (with explanations)?

Let me know your thoughts! :)

[merelinguist]

https://codesandbox.io/s/youthful-gauss-cjfsf

Does this help?

[theairbend3r]

Hi Dylan,

Thanks for the quick reply! This works well. What extra things did you do, after following the next.js example in tailwindcss/setup-examples?

I have one more question, how do use tailwind to create components as well? In the codesandbox you shared above, a component is created using CSS -

const Root = styled.div`
  max-width: 24rem;
  margin: 0 auto;
`;

How can I use tailwind to create a component? Something like the following -

const Root = styled.div`
  font-bold text-red-500
`;

<Root> Hello World </Root>

Next.js' Github repo has an example where we use the tailwind.macro to achieve this (but I think it's no up to date). Check it out here.

As an aside, I think tailwind.macro is not actively maintained anymore. twin.macro is a fork which supports tailwind v1.2. Check it out.