Ga naar inhoud
TextArray1.41.0
100% lokaal

Tailwind-klassensoort

Sorteer utility-klassen in class/className-attributen in Tailwinds aanbevolen volgorde.

Invoer
Uitvoer
Gerelateerde tools
CSS-formatterOntwikkelaarstools
CSS-specificiteitscalculatornieuwOntwikkelaarstools
HTML-formatterOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
SQL naar JSONOntwikkelaarstools
Tailwind-klassensoort
Plak HTML of JSX en dit hulpmiddel ordent de klassen in elk class- en className-attribuut in de aanbevolen volgorde van Tailwind CSS – dezelfde volgorde die prettier-plugin-tailwindcss gebruikt: eerst layout en positionering, dan flexbox en grid, afstand, grootte, typografie, achtergronden, randen en effecten, met responsieve en state-modifiers (hover:, sm:, dark:) die na de basisutility worden geplaatst waarop ze van toepassing zijn. Een consistente volgorde zorgt voor kleinere diffs en makkelijkere pull request reviews, omdat "flex p-4 text-white" en "text-white p-4 flex" identieke output opleveren.
Kies of u het hele geplakte document wilt verwerken – elk class- en className-attribuut scannend – of de invoer als één enkele lijst met klassen behandelen. Niet-Tailwind-klassen (uw eigen componentklassen, utility-namen van een CSS-framework dat dit hulpmiddel niet herkent) worden samen aan het begin of eind van elke lijst gehouden in plaats van erover verspreid. Schakel "Dubbele klassen verwijderen" in om exacte herhalingen weg te gooien, en "Waarschuwen voor klassen die elkaar opheffen" om paren zoals p-4 en p-2, of block en hidden te markeren die elkaar opheffen wanneer ze samen worden toegepast – het aantal wordt weergegeven in de live tally onder de output. "Responsieve varianten groeperen" clustert elke sm:, md: en lg:-klasse aan het eind in plaats van elke naast haar ongeprefixeerde tegenhanger te plaatsen.
Klassen in een template literal met een JavaScript-expressie, zoals className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, worden standaard met rust gelaten, omdat het hulpmiddel niet kan weten wat een variabele tijdens runtime zal renderen – schakel "Dynamische klassen ongewijzigd laten" uit om er omheen te sorteren en elke expressie als een ondoorzichtig token te behandelen. Output als de gewijzigde broncode, klaar om terug in uw editor te plakken, of als een eenvoudige gesorteerde lijst, één klasse per regel.
Alles draait lokaal in uw browser – het HTML-, JSX- of klassenlijstbestand dat u plakt, wordt nooit ergens anders geüpload. Als u klaar bent, kopieert u het resultaat, downloadt u het als .txt-bestand, of stuurt u de output terug naar de invoer om een ander hulpmiddel erop uit te voeren.
FAQ
In welke volgorde sorteert het klassen?
Dezelfde aanbevolen categoriëvolgorde als de officiële Tailwind prettier plugin: layout, flexbox/grid, afstand, grootte, typografie, achtergronden, randen, effecten, filters, transities, transformaties en interactiviteit, waarbij modifiers zoals hover: en sm: na de basisklasse worden geplaatst waarop ze van toepassing zijn.
Werkt het met JSX en template literals, niet alleen met gewone HTML?
Ja. Het herkent class="…", className="…" en className={`…`} template literals. Een className ingesteld vanuit een variabele of functieaanroep zoals clsx(…) kan niet veilig worden geparst en blijft als-is.
Wat telt als een "aangepaste" klasse?
Elke klasse die het hulpmiddel niet als Tailwind utility herkent – uw eigen componentklassen of klassen uit een plugin die dit hulpmiddel niet ondersteunt. Aangepaste klassen behouden hun relatieve volgorde en worden geplaatst aan het begin of einde van de lijst, op basis van de optie die u kiest.
Hoe detecteert het conflicterende klassen?
Het markeert veelvoorkomende gevallen: twee klassen die dezelfde op schaal gebaseerde eigenschap instellen (zoals p-4 en p-2), en elkaar uitsluitende trefwoorden (zoals block en hidden, of text-left en text-right) toegepast met dezelfde modifiers. Het is geen uitputtende linter, maar het vangt de klassen die het vaakst per ongeluk sluipen.
Wordt mijn code ergens geüpload?
Nee. Klassensortering draait volledig in uw browser – het HTML-, JSX- of klassenlijstbestand dat u plakt, verlaat nooit uw apparaat.