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

[Elie]

Hate to be so negative about an article but this is taking things a step backwards. The end result is an awful developer experience

[Yuri Plashenkov]

Hey Elie! Could you explain a bit more detailed? Would be nice to hear your opinion.

[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.

[Yuri Plashenkov]

Ah, okay, got it, thank you!

[Derek Shanks]

You weren’t hating on being so negative. You decided to go the negative superior route of bashing an idea. Rather than approach it as a learning experience as to why some devs might prefer this method.

I never write CSS in my logic. I don’t like class selector pollution - not all of Tailwinds utilities are available via @apply method. Everything from Tailwind is available in the macro and keeps it out of my logic.

I specialize in complex UI animation utilizing tools such as GSAP, AnimeJS and CSS animation with intense data wrangling. This awful setup saves me a lot of time in the long haul. Tailwind has some really fantastic time saving utilities.

Ever see a full GSAP, useRef and onClick handler being mapped from Axios? Throw some Tailwind classes in there. You want to talk about a bad overall developer experience?