[aidos]

You can do both of those things with Tailwind. Put the css only components at the bottom and use them in your main component if you want. Break the classes over multiple lines if you want.

The difference between your 2 examples is that TW allowed you to handle media queries seamlessly but you couldn't do that in your styles example.

[teen]

Each styled-component also increases your css payload size linearly

[shroompasta]

i'm not sure what you mean by 'seamlessly'

but a media query in styled components would just be

    @media (max-width: 700px) {
        css here
    }

it's not that much harder.

Also, the lack of address of real problems of tailwindcss of OPs comment in terms of mantainability is something you consider.

reading iteratively from left to right especially if it has 10+ css rules, in terms of legibility, is not really all too great.

I would absolutely hate to adjust something in tailwindcss, after not seeing the codebase in a month's time.

Whereas regular css properties, i can easily find by eye.

[jmoreno94]

Your eye gets trained eventually. Also most of our components look something like this once class names start to get long.

  const inputWrapperClass = classNames(
    'flex flex-col gap-y-1',
    'group-focus:border-blue-500',
    isDisabled ? 'opacity-50' : null
  );

  return (
    <label className={inputWrapperClass}>
    {...}
    </label>
  )

In practice our "full-stack" developers are writing less and less CSS because they're just using the components that encapsulate all of this, our frontend developers get code completion for our design system tokens, and we haven't had to ship any new CSS classes in the last few months.

Our new hires are able to just use the design system tokens rather than going in and saying `padding: 5px` and `padding: 4px` because the designer didn't think it was a big deal. They just write `p-1` and that covers it.

All the components get tree-shaken and only ship the styles they need so bundle size gets reduced as well.

If I had my dream team of 10x frontend developers and a perfect design team who always follows the rules they create then yes I would use regular css with css variables, but I don't.

I am more than happy to sacrifice "separation of technologies" for a happier team, more consistent styling, and faster delivery times.

[aidos]

"Also, the lack of address of real problems of tailwindcss of OPs comment in terms of mantainability is something you consider."

Not sure what you mean by that. I've been doing this since we did layouts with tables and shims in the 90s. I've found TW pretty nice to maintain myself.

"It's not that much harder", but a) it's a simple example and b) now you're going to litter your code with a load of hard coded media widths?

Let's talk about something concrete. Let's take a really simple layout that changes border and margin responsively (this, for me, is seamless).

    <div className="m-8 lg:m-0">
      <div className="border-2 md:border-4">
        Content
      </div>
    </div>

How would you do that?