u/phfaster

I really love Tailwind. I started using it since v3 and immediately migrated to it wherever it was possible. All perfect about it and I like the new v4 approach.

But there are few things that ruin DX and Tailwind official reply to this is often: find a way to use it.

I have code like:

.box {
  @apply bg-f-orange rounded-default p-4 flex flex-col;

  @media (min-width: theme(--breakpoint-w840)) {
    @apply p-7.5;
  }

  > h2 {
    @apply mb-5;

    @media (min-width: theme(--breakpoint-w840)) {
      @apply mb-7.5;
    }
  }
}

Class name bloat

What Tailwind-native approaches I see:

1. flex flex-col bg-f-orange rounded-default p-4 w840:p-7.5 [&>h2]:mb-5 w840:[&>h2]:mb-7.5 on each box – it is not readable. You can try to convince me that it's my eyes or grouping issue. In this case I have just two nested classes and two breakpoint classes and it's already ugly. I have classes that do more complex rules and more classes under breakpoint. I don't see how it can be replaced in a Tailwind native way.
2. defining custom @layer components component – but then local component become global and I need to solve unique class name issue

Modules

CSS modules are beautiful feature. Tailwind solves reuse of the classes, but class like w840:[&>h2]:mb-7.5, trust me, will never be reused but in this particular component because this class is strictly tied to the component's structure and style. I want to use .module.scss, but without switching to @tailwindcss/postcss seems like there is no way. Btw switching to PostCSS breaks vite aliases and other DX features – so Tailwind way is to suffer one way or another?

Grouping

I want to be able to do something like w840:(absolute flex mb-5 ...) instead of bloated classes. Switching to SCSS is the way – looks more clean, but then we come to inability to use SCSS.

---

All GH issues I found for all my points are closed with "migrate to Tailwind as preprocessor", but Tailwind clearly doesn't serve as preprocessor well. This reply from Tailwind just feels evil. Much better would say: we couldn't come up to any solution which will serve these needs with compatibility with all we wanted to implement.

I usually don't ask for help online and try to find solution myself. I really tried to find workarounds and get used to "Tailwind way", but I can't. The Tailwind way for this points feels wrong on many levels. The code I write with Tailwind in such cases is not good code. I might be wrong. Please point me if it actually can be solved in other ways which make the code readable and maintainable.

Thinking about switching from Tailwind.