Preskoči na sadržaj
TextArray1.41.0
100% lokalno

Tailwind sorter klasa

Sortirajte utility klase u class/className atributima po Tailwindovu preporučenom redoslijedu.

Unos
Rezultat
Slični alati
CSS formaterAlati za programere
Kalkulator specifičnosti CSS-anovoAlati za programere
HTML formaterAlati za programere
i18n tipka difAlati za programere
Konverter iz TOML u JSONAlati za programere
SQL u JSONAlati za programere
Tailwind sorter klasa
Zalijepite HTML ili JSX i ovaj alat će preuređivati klase unutar svakog class i className atributa u redoslijed koji preporučuje Tailwind CSS — isti redoslijed kategorija koji koristi službenoj plugin prettier-plugin-tailwindcss: prvo raspored i pozicioniranje, zatim flexbox i grid, razmak, veličina, tipografija, pozadine, okviri, efekti i slično, s responsivnim i state modifikatorima (hover:, sm:, dark:) postavljenim nakon osnovne utility klase koju mijenjaju. Dosljedno sortiran kod stvara manje diff-ove i lakše je pregledavati pull zahtjeve jer dva programera koji napišu "flex p-4 text-white" i "text-white p-4 flex" dobivaju identičan rezultat.
Odaberite želite li obraditi cijeli zalijepljeni dokument — traženjem svakog class i className atributa — ili tretirajte ulaz kao jedan popis klasa bez ničega drugoga. Nestandardne klase (vlastiti component razredi, nazivi utility klasa iz CSS frameworka koje ovaj alat ne prepoznaje) ostaju zajedno na početku ili kraju svakog popisa umjesto da budu rasute kroz njega. Uključite "Uklonite duplikate klasa" da biste izbrisali točne duplikate, i "Upozorenje o klasama koje se međusobno poništavaju" da označite parove poput p-4 i p-2, ili block i hidden, koji se međusobno isključuju — broj se pojavljuje u živom zbroju ispod rezultata. "Grupirajte responsive varijante zajedno" okuplja svaki sm:, md: i lg: razred na kraju umjesto da prepliće svaki s njezinim neprefaksijanim pandanom, što neki timovi preferiraju za brže čitanje.
Klase unutar template literala koja sadrže JavaScript izraz, kao što je className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, ostaju netaknute po zadanosti jer alat ne može znati što će se varijabla prikazati tijekom izvršavanja — isključite "Ostavite dinamičke klase netaknute" ako želite da se sortiraju oko njih umjesto toga, tretirajući svaki izraz kao neprozirni token. Rezultat izvezite kao izmijenjeni izvorni kod, spreman za ponovno zalijepljenje u vašu uredjivač, ili kao obični sortirani popis, po jednu klasu po liniji.
Sve se izvršava lokalno u vašem pregledniku — HTML, JSX ili popis klasa koji zalijepite nikada se ne šalje nigdje. Kada završite, kopirajte rezultat, preuzmite ga kao .txt datoteku ili pošaljite rezultat natrag u ulaz kako biste pokrenuli neki drugi alat na njega.
FAQ
U kojem redoslijedu sortirajte klase?
U istom preporučenom redu kategorija kao službenoj plugin Tailwinda: raspored, flexbox/grid, razmak, veličina, tipografija, pozadine, okviri, efekti, filtri, prijelazi, transformacije i interaktivnost, s modifikatorima kao što su hover: i sm: postavljenim nakon osnovne klase na koju se primjenjuju.
Radi li sa JSX-om i template literalima, ne samo s običnim HTML-om?
Da. Prepoznaje class="…", className="…" i className={`…`} template literal. className postavljen iz varijable ili poziva funkcije kao što je clsx(…) ne može se sigurno parsirati i ostaje nepromijenjen.
Što se računa kao "prilagođena" klasa?
Bilo koja klasa koju alat ne prepoznaje kao Tailwind utility — vaši vlastiti component razredi ili klase iz plugin-a koju ovaj alat ne pokriva. Prilagođene klase čuvaju svoj relativni redoslijed i postavljaju se na početak ili kraj popisa, ovisno o opciji koju odaberete.
Kako detektira sukobljene klase?
Označava česte slučajeve: dvije klase koje postavljaju isto svojstvo temeljeno na skali (poput p-4 i p-2), i međusobno isključive ključne riječi (poput block i hidden, ili text-left i text-right) primijenjene sa istim modifikatorima. To nije iscrpan linter, ali hvata klase koje se najčešće pojave slučajno.
Je li moj kod preuzet negdje?
Ne. Sortiranje klasa se izvršava u potpunosti u vašem pregledniku — HTML, JSX ili popis klasa koji zalijepite nikada ne napušta vašu uređaj.