DEV Community

Discussion on: Tailwind with React

View post
Collapse
 
digioi profile image
Mike DiGioia • • Edited

You can simplify it a bit more with the following.

const Button = styled.button`
  ${tw`bg-gray-300 text-yellow-900 px-8 m-8 rounded h-20 text-3xl`}
`;
Enter fullscreen mode Exit fullscreen mode

to

const Button = tw.button`bg-gray-300 text-yellow-900 px-8 m-8 rounded h-20 text-3xl`;
Enter fullscreen mode Exit fullscreen mode

You do this by updating the babel macro config with something like

{
  tailwind: {
     config: tailwindConfig, // if you added a config file
     styled: '@emotion/styled',
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
stevenacoffman profile image
Steve Coffman •

Hey Ryan,
Very nice! I'm not familiar with Tailwind.Macro or babel-plugin-tailwind-components. Would they provide the same cut-what-is-not-needed benefits as PostCSS + Purgecss, or would you consider using both?

Collapse
 
ryanlanciaux profile image
Ryan Lanciaux •

That's a great question and I'm not entirely sure right now. I tried to find a bit more info on it but to no avail. I have a project where I'm using this and next time I'm in the code, I may try to do a production build and see if it's doing any of the purging type operations.

If it's not, it'd likely be good to do that still :D

Collapse
 
ryanlanciaux profile image
Ryan Lanciaux •

Very nice! Thanks