Was bedeutet "p-4 von px-4 überdeckt"?

`p-4` setzt das [[Padding||innerer Abstand innerhalb eines Elements]] auf allen Seiten (links, rechts, oben, unten). `px-4` setzt nur links+rechts, `py-4` nur oben+unten. **Hast du beide**, setzt `p-4` überall 4, dann überschreibt `px-4` links/rechts. Kann Absicht sein (`p-4 px-8` gibt mehr horizontales Padding), ist aber meist Vergesslichkeit.

Warum werden Klassen in einer bestimmten Reihenfolge sortiert?

Tailwind-Community-Konvention (und prettier-plugin-tailwindcss): **Layout -> Positioning -> Display -> Sizing -> Spacing -> Typography -> Background -> Border -> Effects -> Transitions -> States**. Macht **visuelles Scannen einfach**: Suchst du "welches Layout?" - immer zuerst. "Welche Background?" - irgendwo in der Mitte. Ohne Konvention schreibt jeder Klassen in der Reihenfolge, in der er sie ergänzt hat, und jede Komponente sieht anders aus.

Werden Arbitrary-Values [...] unterstützt?

Ja, aber **vorsichtig**. `p-[3px]` wird als `p-` behandelt (konfligiert also mit `p-4`, letzter gewinnt). Aber `bg-[url(/img.png)]` wird separat von `bg-red-500` behandelt (verschiedene Properties - eine background-image, eine background-color). **Edge-Case**: `[--my-var]` (Custom-Property) bleibt unangetastet.

Was ist mit States wie hover: und focus:?

Jeder State hat seine **eigene unabhängige Gruppe**. `hover:bg-red` und `bg-blue` sind **zwei verschiedene Styles** - einer in `:hover`, einer immer. Konflikte entstehen **nur zwischen Klassen mit gleichem Modifier**: `hover:bg-red` vs `hover:bg-blue` (letzter gewinnt), `md:p-4` vs `md:p-8` (letzter gewinnt). Das Tool erkennt das alles.

Was ist ein "Dead State"?

Wenn eine State-Klasse **denselben Wert wie die Basis** hat: z. B. `bg-white dark:bg-white` - die Farbe ändert sich im Dark-Mode nicht, also ist `dark:bg-white` **sinnlos**. Oder `text-red-500 hover:text-red-500` - Hover ändert nichts. Das Tool flaggt das als **Soft-Warning** (entfernt nicht auto, weil die Absicht manchmal ist, Hover zu "deaktivieren", obwohl es meist bessere Wege gibt).

Kann ich eine ganze JSX-Komponente pasten?

Besser nur den **Inhalt von className** pasten. Mit oder ohne Anführungszeichen. Pastest du die ganze Komponente, kann das Tool den String evtl. nicht korrekt extrahieren. **Empfohlen**: in VS Code in den String klicken und "Select inside quotes" nutzen (Strg+Shift+\\ oder eine Extension).

Was ist mit Prefixes wie tw-?

Nutzt du ein Prefix (`tw-p-4`, `tw-bg-red`), behandelt das Tool es als Teil des Klassen-Prefix. **Sollte funktionieren**, aber die Konflikt-Erkennung ist evtl. weniger präzise für Non-Standard-Prefixes. Für Default-Tailwind ohne Prefix funktioniert es perfekt.

Warum ist das Ergebnis eine lange Zeile?

Weil `className` ein **String** ist, und ein JSX-String gehört auf eine Zeile. Willst du **mehrzeilig**, nimm ein Template-Literal oder eine Library wie `clsx` / `cn`. Beispiel: `className={cn("flex p-4", "text-sm", isActive && "bg-blue")}`. Das Tool gibt einen einzelnen String zurück - für Formatting ergänz `clsx` selbst.

Ist das dasselbe wie tailwind-merge?

Ähnlich, aber **anderer Use-Case**. `tailwind-merge` ist eine **Runtime-Library** in Komponenten: `twMerge("p-4", maybeP6)` - löst Konflikte im Code (z. B. ein User kann eine Klasse überschreiben). Wir machen das **statisch**: einmal pasten, bereinigtes Ergebnis kriegen. Für Runtime bleib bei tailwind-merge. Für **einmaliges Cleanup** nimm dieses Tool.

Tailwind-Class-Cleaner - kostenlos

Warum eine Tailwind-Klassen-Liste aufräumen?

Nach ein paar Iterationen sieht dein `className` so aus: `"flex p-4 hover:bg-blue-500 px-4 text-sm hover:bg-blue-600 md:p-6 md:p-8 font-medium bg-white"`. Drei Probleme drin: `p-4` ist von `px-4` teilweise überschrieben (redundant), zwei `hover:bg-blue-...` (Hover-Konflikt), `md:p-6` von `md:p-8` überschrieben (Breakpoint-Konflikt). Und alles ist durcheinander.

Das Tool erkennt Konflikte ("p-4 von p-2 überschrieben", "md:p-4 vs md:p-8") und Redundanzen (`p-4` + `px-4` ist Verschwendung). Dann sortiert es die Überlebenden in konventionsgerechter Reihenfolge: Layout -> Positioning -> Sizing -> Spacing -> Typography -> Background -> Border -> Effects -> States.

Das Ergebnis ist lesbar und bug-frei. Du siehst, was rausflog, wie viele Gruppen sortiert wurden, und eine Stats-Summary.

So nutzt du das Tool

Einen langen className-String (aus einer React-/Vue-/HTML-Komponente) ins linke Panel pasten.
Rechts kriegst du die bereinigte Version plus eine Liste der erkannten Probleme.
Jedes Issue hat eine Beschreibung ("p-4 von p-2 überschrieben") - leicht zu verstehen, warum die Klasse weg ist.
"Sort only" anschalten für den sicheren Modus - das Tool wirft nichts weg, sortiert nur (nützlich, wenn du der Konflikt-Erkennung nicht traust).
"Copy" drücken und das Ergebnis zurück in dein JSX pasten.

Wann das hilft

Klassische Situationen:

Lang lebende Komponenten. Eine Produkt-Karte nach 10 Design-Iterationen hat 30 Klassen - die meisten sinnlos. Nach Cleanup bleiben 12.
Designer-generierte Klassen aufräumen. Ein Figma-to-Tailwind-Plugin spuckt aufgebläht Strings aus - durchjagen.
Code-Review. Der Kommentar "die Klassen sind chaotisch" - File durchs Tool jagen, konsistentes Styling kriegen. Funktioniert gut mit prettier-plugin-tailwindcss, aber hier kriegst du auch Konflikt-Erkennung.
Zu einer neuen Tailwind-Version migrieren. v4 ändert das Verhalten einiger Klassen - leicht zu sehen, was überlebt.
Team-Onboarding. Ein Junior schreibt `p-4 px-4 py-4` in der Annahme "doppelt sicher" - das Tool erklärt, dass `p-4` schon `px-4 py-4` heißt.
KI-generierten Code aufräumen. AI liebt es, aufgebläht className-Strings auszuspucken. Filtern.
Nebeneinander mit dem Palette-Generator - für Farbwahl schau den Tailwind-Palette-Generator.

Für Spezifitäts-Berechnungen schau den Spezifitäts-Rechner. Für CSS-Gradients schau den Gradient-Generator.

Häufig gefragt

Es parst jede Klasse in Prefix-Base-Modifier. Z. B. wird `md:hover:p-4` zu: Modifiers `["md", "hover"]`, Prefix `p`, Wert `4`. Zwei Klassen mit den gleichen Modifiern und dem gleichen Property-Prefix (`p-`) konfligieren. Die letzte gewinnt (Tailwind appendet Klassen in CSS-Source-Order, die letzte hat Priorität).

Warum eine Tailwind-Klassen-Liste aufräumen?

Das Ergebnis ist lesbar und bug-frei. Du siehst, was rausflog, wie viele Gruppen sortiert wurden, und eine Stats-Summary.

So nutzt du das Tool

Einen langen className-String (aus einer React-/Vue-/HTML-Komponente) ins linke Panel pasten.

Rechts kriegst du die bereinigte Version plus eine Liste der erkannten Probleme.

Jedes Issue hat eine Beschreibung ("p-4 von p-2 überschrieben") - leicht zu verstehen, warum die Klasse weg ist.

"Sort only" anschalten für den sicheren Modus - das Tool wirft nichts weg, sortiert nur (nützlich, wenn du der Konflikt-Erkennung nicht traust).

"Copy" drücken und das Ergebnis zurück in dein JSX pasten.

Wann das hilft

Klassische Situationen:

Lang lebende Komponenten. Eine Produkt-Karte nach 10 Design-Iterationen hat 30 Klassen - die meisten sinnlos. Nach Cleanup bleiben 12.
Designer-generierte Klassen aufräumen. Ein Figma-to-Tailwind-Plugin spuckt aufgebläht Strings aus - durchjagen.
Code-Review. Der Kommentar "die Klassen sind chaotisch" - File durchs Tool jagen, konsistentes Styling kriegen. Funktioniert gut mit prettier-plugin-tailwindcss, aber hier kriegst du auch Konflikt-Erkennung.
Zu einer neuen Tailwind-Version migrieren. v4 ändert das Verhalten einiger Klassen - leicht zu sehen, was überlebt.
Team-Onboarding. Ein Junior schreibt `p-4 px-4 py-4` in der Annahme "doppelt sicher" - das Tool erklärt, dass `p-4` schon `px-4 py-4` heißt.
KI-generierten Code aufräumen. AI liebt es, aufgebläht className-Strings auszuspucken. Filtern.
Nebeneinander mit dem Palette-Generator - für Farbwahl schau den Tailwind-Palette-Generator.

Für Spezifitäts-Berechnungen schau den Spezifitäts-Rechner. Für CSS-Gradients schau den Gradient-Generator.

Häufig gefragt

Tailwind-Class-Cleaner