Preskoči na vsebino
TextArray1.41.0
100% lokalno

Tailwind sorter razredov

Sortira utility razrede v class/className atributih v priporočeni Tailwindov red.

Vhod
Izhod
Povezana orodja
Oblikovalnik CSSOrodja za razvijalce
Kalkulator specifičnosti CSSnovoOrodja za razvijalce
Oblikovalnik HTMLOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
SQL v JSONOrodja za razvijalce
Tailwind sorter razredov
Prilepite HTML ali JSX in to orodje bo preuredilo razrede v vsakem class in className atributu v red, ki ga priporoča Tailwind CSS — isti red kategorij kot v uradnem plugin prettier-plugin-tailwindcss: najprej razporeditev in pozicioniranje, nato flexbox in grid, razmik, velikost, tipografija, ozadja, robovi, učinki in naprej, s odzivnimi in state modifikatorji (hover:, sm:, dark:) postavljenimi za osnovni utility razred, ki ga spreminjajo. Logično urejen kod ustvari manjše diff in olajša pregled pull zahtevkov, ker dva razvijalca, ki napišeta "flex p-4 text-white" in "text-white p-4 flex", dobita enak rezultat.
Izberite, ali želite obdelati celoten prilepljeni dokument — preiskal vsak class in className atribut — ali pa obdelujte vnos kot en sam seznam razredov brez vsega drugega. Nestandardni razredi (vaši component razredi, imena utility razredov iz CSS ogrodja, ki jih to orodje ne prepozna) ostanejo skupaj na začetku ali koncu vsakega seznama namesto da bi bili razpršeni po njem. Vključite "Odstranite duplikate razredov" za brisanje točnih duplikatov in "Opozorila o razredih, ki se medsebojno izključujejo" za označitev parov kot p-4 in p-2 ali block in hidden, ki se medsebojno izključujejo — številka se prikaže v živem povzetku pod rezultatom. "Razvrsti odzivne različice skupaj" zbere vsak sm:, md: in lg: razred na konec namesto da prepriča vsakega s svojo nepredponsko različico, kar nekateri timovi raje vidijo za hitrejše skeniranje.
Razredi v template literalu, ki vsebuje izraz JavaScript, kot je className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, ostanejo nespremenjeni privzeto, ker orodje ne more vedeti, kaj bo spremenljivka prikazala ob izvajanju — izklopite "Pustite dinamične razrede nespremenjene" če želite, da se sortirajo okrog njih namesto tega, pri čemer vsak izraz obravnavajte kot neprozoren žeton. Rezultat izvozite kot spremenjen izvorno kodo, ki je pripravljena za ponovno prilepljenje v urejevalnik, ali kot navaden urejen seznam, en razred na vrstico.
Vse se izvršuje lokalno v vašem brskalniku — HTML, JSX ali seznam razredov, ki ga prilepite, se nikoli ne pošlje nikamor. Ko končate, rezultat kopirajte, ga preuzmite kot .txt datoteko ali ga pošljite nazaj v vhod, da na njem zaženete drugo orodje.
FAQ
V kakšnem redu se sortirajo razredi?
V istem priporočenem vrstnem redu kategorij kot v uradnem pluginu Tailwinda: razporeditev, flexbox/grid, razmik, velikost, tipografija, ozadja, robovi, učinki, filtri, prehodi, transformacije in interaktivnost, s spremenljivkami kot sta hover: in sm: postavljenima za osnovni razred, na katerega se nanašajo.
Ali deluje z JSX in template literali, ne samo s preprosto HTML?
Da. Prepozna class="…", className="…" in className={`…`} template literal. className nastavljen iz spremenljivke ali poziva funkcije, kot je clsx(…), se ne more varno razčleniti in ostane nespremenjen.
Kaj se šteje za "prilagojen" razred?
Katerikoli razred, ki ga orodje ne prepozna kot Tailwind utility — vaši lastni component razredi ali razredi iz plugina, ki ga to orodje ne zajema. Prilagojeni razredi ohranijo svoj relativni red in se postavijo na začetek ali konec seznama, odvisno od možnosti, ki jo izberete.
Kako zaznava razrede v konfliktu?
Označuje pogoste primere: dva razreda, ki nastavljata isto lastnost na osnovi lestvice (kot p-4 in p-2), in medsebojno izključujoče ključne besede (kot block in hidden ali text-left in text-right), ki se uporabljajo z istimi modifikatorji. To ni celovit linter, vendar ujame razrede, ki se najpogosteje slučajno pojavljajo.
Je moja koda naložena nekje?
Ne. Sortiranje razredov se v celoti izvršuje v vašem brskalniku — HTML, JSX ali seznam razredov, ki ga prilepite, nikoli ne zapusti vaše naprave.