DEV Community

Discussion on: An Efficient React + TailwindCSS + Styled Components Workflow

Collapse
 
dbshanks profile image
Derek Shanks

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.