DEV Community

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

Collapse
 
elie222 profile image
Elie

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.

Thread Thread
 
plashenkov profile image
Yuri Plashenkov

Ah, okay, got it, thank you!