Warum Tailwind CSS Klassen sortieren?
Tailwind CSS Klassenreihenfolge beeinflusst Lesbarkeit und Wartbarkeit. Das offizielle Prettier-Plugin für Tailwind empfiehlt eine bestimmte Reihenfolge: Layout, Flexbox/Grid, Abstand, Größe, Typografie, Hintergründe, Grenzen, Effekte, Übergänge, Transformationen und Interaktivität. Konsequente Bestellung macht Code-Reviews einfacher und reduziert sinnlose Diffs. Dieses Tool sortiert Ihre Klassen nach der empfohlenen Reihenfolge.
So sortieren Sie Tailwind-Klassen
- 1Fügen Sie Ihren Tailwind CSS Klassenstring in den Eingabebereich ein.
- 2Das Tool sortiert sofort Klassen nach der offiziell empfohlenen Reihenfolge.
- 3Schalten Sie „Remove“ Duplikate um, um wiederholte Klassen zu bereinigen.
- 4Klicken Sie auf „Copy“, um die sortierte Klassenzeichenfolge zu kopieren.
Häufige Anwendungsfälle
Codebereinigung
Organisieren Sie unordentliche Klassenzeichenfolgen beim Refactoring von Komponenten oder beim Überprüfen von Pull-Anfragen.
Stilbeständigkeit
Stellen Sie eine konsistente Klassenordnung in Ihrem Team sicher, wenn das Prettier-Plugin nicht konfiguriert ist.
Schnelles Formatieren
Sortieren und Deduplizieren von Klassen, die aus Browser-DevTools oder Design-Tools kopiert wurden.
Häufig gestellte Fragen
Folgt dies der offiziellen Tailwind Sortierreihenfolge?
Ja. Die Sortierreihenfolge folgt den Tailwind CSS Prettier Plugin-Konventionen: Layout, Flexbox/Grid, Abstand, Größe, Typografie, Hintergründe, Grenzen, Effekte, Übergänge, Transformationen, Interaktivität.
Wie werden responsive Präfixe behandelt?
Klassen mit responsiven Präfixen (sm:, md:, lg:, xl:) werden nach Basisklassen in Haltepunktreihenfolge sortiert. Zustandsvarianten (hover:, focus:) werden ähnlich gruppiert.
Was ist mit Custom Classes?
Benutzerdefinierte Klassen, die keine Standard-Tailwind-Dienstprogramme sind, werden am Ende der sortierten Ausgabe platziert.