DEV Community

Discussion on: The Right Way To Add Tailwind CSS to Gatsby with Purge CSS

Collapse
 
pedroapfilho profile image
Pedro Filho

Nice article and video! Could you make one to use with styled-components?

Collapse
 
kainmaligno profile image
Salvador Emmanuel • Edited

you can write the same way the styled component just like this with emotion

import tw, { styled } from "twin.macro"
export const Hero = tw.div
w-full
bg-center
h-full
bg-cover

and mixed

export const Title1 = styled.div
${tw
text-silver text-center text-4xl font-bold mt-3 mb-3}
font-family:'Fondamento';
color: ${(props) => (props.color ? "#e0e2db" : "text-gray-300")};

Collapse
 
kainmaligno profile image
Salvador Emmanuel

image

Collapse
 
good3n profile image
Tom Gooden✨

+1 -- I think most people would get more benefit from this if you used styled-components.