Zum Inhalt springen
TextArray1.41.0
100% lokal

Tailwind-Klassensortierer

Sortieren Sie Utility-Klassen in class/className-Attributen in Tailwinds empfohlene Reihenfolge.

Eingabe
Ausgabe
Verwandte Tools
CSS-FormatiererEntwickler-Tools
CSS-Spezifität-RechnerneuEntwickler-Tools
HTML-FormatiererEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
Tailwind-Klassensortierer
Fügen Sie HTML oder JSX ein, und dieses Tool ordnet die Klassen in jedem class- und className-Attribut nach Tailwind CSS's empfohlener Reihenfolge an – derselben Kategoriereihenfolge, die das offizielle prettier-plugin-tailwindcss verwendet: zuerst Layout und Positionierung, dann Flexbox und Grid, Abstände, Größenangaben, Typografie, Hintergründe, Rahmen und Effekte, mit responsiven und State-Modifikatoren (hover:, sm:, dark:), die nach der Basis-Utility platziert werden, auf die sie angewendet werden. Eine konsistente Reihenfolge führt zu kleineren Diffs und erleichtert Pull-Request-Überprüfungen, da zwei Entwickler, die "flex p-4 text-white" und "text-white p-4 flex" schreiben, am Ende identische Ausgabe haben.
Wählen Sie, ob das eingefügte Dokument vollständig verarbeitet werden soll – wobei jedes class- und className-Attribut gescannt wird – oder behandeln Sie die Eingabe als einzelne einfache Klassenliste. Nicht-Tailwind-Klassen (Ihre eigenen Komponenten-Klassen, Utility-Namen eines Frameworks, die dieses Tool nicht erkennt) werden zusammen am Anfang oder Ende jeder Liste behalten, anstatt über sie verteilt zu werden. Aktivieren Sie "Doppelte Klassen entfernen", um exakte Wiederholungen zu löschen, und "Vor Klassen warnen, die sich gegenseitig aufheben", um Paare wie p-4 und p-2 oder block und hidden zu kennzeichnen, die sich gegenseitig aufheben, wenn sie zusammen angewendet werden – die Anzahl erscheint in der Live-Zusammenfassung unter der Ausgabe. "Responsive Varianten zusammengruppieren" fasst alle sm:, md: und lg:-Klassen am Ende zusammen, anstatt jede neben ihrer unpräfixierten Entsprechung zu verschachteln, was einige Teams zum schnellen Scannen bevorzugen.
Klassen in einem Template Literal mit einem JavaScript-Ausdruck, wie className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, werden standardmäßig unverändert gelassen, da das Tool zur Laufzeit nicht wissen kann, was eine Variable rendern wird – schalten Sie "Dynamische Klassen unverändert lassen" aus, um stattdessen herum zu sortieren. Geben Sie als geänderten Quellcode aus, bereit zum Zurückkopieren in Ihren Editor, oder als einfache sortierte Liste, eine Klasse pro Zeile.
Alles läuft lokal in Ihrem Browser – das HTML, JSX oder die Klassenliste, das Sie einfügen, wird nie irgendwo hochgeladen. Wenn Sie fertig sind, kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter, oder senden Sie die Ausgabe zurück in die Eingabe, um ein anderes Tool darauf auszuführen.
Häufige Fragen
In welcher Reihenfolge sortiert es Klassen?
Dieselbe empfohlene Kategoriereihenfolge wie das offizielle Tailwind prettier Plugin: Layout, Flexbox/Grid, Abstände, Größenangaben, Typografie, Hintergründe, Rahmen, Effekte, Filter, Übergänge, Transformationen und Interaktivität, wobei Modifikatoren wie hover: und sm: nach der Basis-Klasse platziert werden, auf die sie angewendet werden.
Funktioniert es mit JSX und Template Literals, nicht nur mit normalem HTML?
Ja. Es erkennt class="…", className="…" und className={`…`} Template Literals. Ein className, das von einer Variablen oder einem Funktionsaufruf wie clsx(…) gesetzt wird, kann nicht sicher analysiert werden und wird belassen.
Was zählt als "benutzerdefinierte" Klasse?
Jede Klasse, die das Tool nicht als Tailwind Utility erkennt – Ihre eigenen Komponenten-Klassen oder Klassen aus einem Plugin, das dieses Tool nicht abdeckt. Benutzerdefinierte Klassen behalten ihre relative Reihenfolge und werden basierend auf der gewählten Option am Anfang oder Ende der Liste platziert.
Wie erkennt es widersprüchliche Klassen?
Es kennzeichnet häufige Fälle: zwei Klassen, die die gleiche skalenbasierte Eigenschaft setzen (wie p-4 und p-2), und sich gegenseitig ausschließende Schlüsselwörter (wie block und hidden oder text-left und text-right), die mit denselben Modifikatoren angewendet werden. Es ist kein erschöpfendes Linter, aber es erfasst die Klassen, die am häufigsten versehentlich hinzugefügt werden.
Wird mein Code irgendwo hochgeladen?
Nein. Die Klassensortierung läuft vollständig in Ihrem Browser – das HTML, JSX oder die Klassenliste, das Sie einfügen, verlässt niemals Ihr Gerät.