Search code examples
reactjsstyled-componentstailwind-css

Usage of TailwindCSS messes with styled components in react


the problem I have is simply explained. I work on a project as a front-end developer and use react with styled-components to do so. My colleague uses TailwindCSS. Now I tried to merge things together but it seems like whenever I activate Tailwind and the components of my collage it messes up my styled-components just a slight bit so they look off, even though he did not work on these files and has never done anything Tailwindy inside of them. Is there something I'm missing out on or should look for?

Thank you in advance.


Solution

  • I don't know how you're working together but the right way to integrate styled components with tailwind is with the attr function to add the styles

    const Card = styled.div.attrs({ className: "bg-white mx-auto max-w-sm shadow-lg rounded-lg" })` ["Your styles and props"]`;
    //and even extend later
    <Card className="overflow-hidden">Content</Card>
    

    Otherwise, some tailwind global styles can affect your components where you don't want it to happen (this is probably what happened to you).