r/tailwindcss

Hello , I have been building a web + mobile app and I'm at the point where I would like to rethink the design cause it is only code with Claude and the ui is rough.

So the app is already built and I don t want to break the existing logic . My stack is react+vite, tailwind css.

I ve looked into tools like Lovable, v0, Magic Patterns, Superdesign, etc., but I'm a bit lost on which one actually makes sense when you already have a working codebase. A lot of them seem built to generate apps from zero, and I'm worried about an AI agent wandering into my business logic and wrecking stuff I spent ages stabilizing

So do you have advice or could you tell me about your experience to redesign anexisting app?

Which tools play nice with this stack ?

Is it any way to keep the redesign strictly on the ui layer without touching the logic?

Thanks for your responses and hope you ll understand , i m a french man. Have a nice day

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.