DEV Community

How and Why I Use Emotion with Tailwind

Luke Bayliss on May 04, 2019

Note 2.0: This post has not aged particularly well due to a lot of changes to a number of the tools and frameworks referenced. I had intentions to ...
Collapse
 
mefithp profile image
Mefit Hernández

Hey Luke, I was wondering which would be a good approach to use TW + Emotion together and this helped me a lot, I'm so interested to know how you use Tailwind with the last realease, I would love to read the article soon. Greetings!

Collapse
 
alessandrojcm profile image
Alessandro Cuppari

Hi there! Great article. I'm interested in how you adapted it to the newer version, maybe could you share how you did it please?

Collapse
 
lbayliss profile image
Luke Bayliss

Hey! Thanks for the comment.
I've actually got a new repo up with both the latest nextjs , tailwind and emotion versions!

github.com/lpbayliss/nextjs-starter

I'd like to revisit this article soon with the updated steps but hopefully this can help scratch that itch!

Collapse
 
alessandrojcm profile image
Alessandro Cuppari

Cool, I'll check that out. Thanks!

Collapse
 
blessdarah profile image
Bless Darah Gah

I find this hard to create generic components with this approach. For instance, how do I create a generic button class so that I can pass in a theme prop and it generates the corresponding button for that theme? What's the best approach?

Collapse
 
bloycey profile image
Andrew Bloyce

Hi,just seconding a few comments below that I'd love to see an updated version of this idea working in isolation. Really like the thought behind it!

Collapse
 
lbayliss profile image
Luke Bayliss

I’ve got a new project up, and about half way through an updated post I’m hoping to publish soon!

Collapse
 
jdruwe profile image
Jeroen

Already an update? :)

Collapse
 
drewes profile image
Helmut Drewes

Thanks for the article. The repo link seems dead? Would love to see your starter.

Collapse
 
lbayliss profile image
Luke Bayliss

Hey! Sorry about that. I recently deleted it (as a few of the tools have since been updated and it was now out of date). I forgot I had linked it here, oops.

Collapse
 
juuyan profile image
Yan

Hi thanks for sharing your approach! Just one question, why didn't you use the nextjs build-in styled-jsx? Just personal taste or you have found something make emotion a better choice?

Collapse
 
lbayliss profile image
Luke Bayliss

I just prefer emotion over styled-jsx. I enjoy the styled component approach better.

Collapse
 
alanbrowndesign profile image
Alan Brown

Just came here to see if anyone had attempted this and the solution looks neat, like the best of both worlds approach. Would be keen to see the update.