DEV Community

An Efficient React + TailwindCSS + Styled Components Workflow

Derek Shanks on January 22, 2020

Notice December 2nd 2020 With the release of Tailwind 2.0 much of this article is overkill for newly started projects. However, many com...

Read full post

Ben Rogerson • May 27 '20

Hey maybe take a look at twin.macro which is up to date with the latest Tailwind. There's no need to use attrs with Twin unless you want to add the 'group' className in there.

Elie • Jun 14 '20

Hate to be so negative about an article but this is taking things a step backwards. The end result is an awful developer experience

Derek Shanks • Jul 21 '20

You weren’t hating on being so negative. You decided to go the negative superior route of bashing an idea. Rather than approach it as a learning experience as to why some devs might prefer this method.

I never write CSS in my logic. I don’t like class selector pollution - not all of Tailwinds utilities are available via @apply method. Everything from Tailwind is available in the macro and keeps it out of my logic.

I specialize in complex UI animation utilizing tools such as GSAP, AnimeJS and CSS animation with intense data wrangling. This awful setup saves me a lot of time in the long haul. Tailwind has some really fantastic time saving utilities.

Ever see a full GSAP, useRef and onClick handler being mapped from Axios? Throw some Tailwind classes in there. You want to talk about a bad overall developer experience?

Yuri Plashenkov • Jul 15 '20

Hey Elie! Could you explain a bit more detailed? Would be nice to hear your opinion.

Elie • Jul 15 '20

Mixing TW

const AppStyles = styled.div.attrs({
    className: "w-full h-screen flex flex-col items-center justify-center"
})`
    & {
      h1 {
        ${tw`font-sans text-6xl font-hairline text-6xl text-teal-500`}
        transform: scale(1);
        transition: all 0.3s ease-in-out;
     }
      h1:hover {
      transform: scale(2);
    }
}
`;

Just seems overly complexing mixing all these styles.
Stick with Styled. Or go full out with TW. Not sure the benefit of this mix.

Yuri Plashenkov • Jul 15 '20

Ah, okay, got it, thank you!

Tom Yeoman • Feb 27 '20 • Edited

Awesome thanks for writing this up! I've been thinking of this exact setup having tried both routes separately.

The problem I had was the tailwind macro on its own some selectors were not working. So I ended up just going the standalone tailwindcss route and found this.

Some questions I had -

Will this double setup not lead to a large CSS payload. You've basically got every tailwind selector twice. Once via @tailwind utilities and then a second time when you're using tailwind macro via tw`` is this not an issue?

In the AppStyles example className is mixed with ${tw}, why not just use ${tw` entirely? From my understanding this would allow you to not require the @tailwind utilities import ( providing you do not have the same issue as me where some classes do not work )

3 -

When I was looking @ the tailwind macro code it looks like all the tailwind > CSS mappings are hand crafted in there in order to translate. I had worried this can fall out of date ( and I believe already is ) easily without some love have you noticed this?

Derek Shanks • Feb 27 '20

Hi Tom!

Thanks for taking the time to read the crazy contraption I have put together.

tw does not have access to the entirety of Tailwinds classes like pseudo selectors and many others.

The styled-component attr function has access to all of Tailwinds classes. With Babel macro config file we’re updating the macro on where to find Tailwind.

The idea is to use the attrs function as a parent container where all of Tailwinds classes are available and tw as secondary nested using the most common of Tailwinds selectors.

Also with the Styled Components function you have the ability to provide standard CSS for things that Tailwind does not have in its codebase.

I have another article that I am writing to handle Tailwind compression using @fullhuman/purgecss

As far as I know the tw macro only creates classes to access macro version of Tailwind classes but only relies on the single Tailwind import and does not duplicate.

Pankaj Patel • May 5 '20

I came across this project as well which can be interesting to integrate and get started with StyledComponents and Tailwind

emortlock.github.io/tailwind-react...
github.com/emortlock/tailwind-reac...

Richard McSharry • Apr 2 '20 • Edited

Derek, thanks for this, seems awesome...have you applied it to a Gatsby project?

Although it seems that this page:
gatsbyjs.org/docs/tailwind-css/

shows how to do the same thing using emotion styled components with tailwind - but after reading it, it seems to be not completely clear, so I found a detailed walkthrough for Gatsby:

nystudio107.com/blog/using-tailwin...

GregIven • Mar 25 '21

Idk if anyone else was having trouble with exporting the AppStyles, maybe a typo, can't be sure because nobody else raised the issue.

But was getting an expected export default from the AppStyles import into the App.js. Adding curly braces around the AppStyles fixed the error. -> import { AppStyles } from ...

Ryan Lanciaux • Jan 22 '20

Really great post - cool to see how others are using React + Tailwind :D

Andrea Cappuccio • Aug 1 '20

Super useful, thank you!

Derek Shanks • Aug 3 '20

Thanks Andrea. Glad you found it helpful and also for hanging in there till the end. Haha!

urbankid • Feb 20 '20

Great post, I'm just starting to integrate Tailwind with React in a Laravel project and this will help keep my templates from getting way to chaotic. Looking forward for more of your articles!

Derek Shanks • Feb 20 '20

Thank you for the kind words.

I have more articles planned for Tailwind. I think Adam and Steve have created an amazing tool for UI development. I want to be a part of endorsing the Tailwind style system as it is phenomenal and create isolated style patterns that have minimal performance import.

GuerrillaCoder • Jan 26 '21

Why does tailwind 2 make this method redundant?

Anand Kashyap • Oct 17 '20

First of all. Its a great post!!
I have one question - would purgecss work correctly with this setup?

Derek Shanks • Oct 21 '20

Yes it does. I have had unpredictable results though unfortunately.
While this method has been efficient. Tailwind 2.0 is around the corner. There is far better support for its @apply method among many other great features that have been missing that would eliminate having to use this workflow.

With the expanded @apply method and Tailwinds automatic PurgeCSS inclusion. We're in for a really nice experience soon. 2.0 Beta is already out. Exciting.

This method I have written will still be applicable for those who need to work legacy code bases and projects.

Thank you for the support and sticking with the article!!

R K • Oct 6 '20

How to setup the same with nextjs?