Sorter Tailwind tried

Usporiadajte utility triedy v atribútoch class/className do odporúčaného poradia Tailwindu.

Vstup

RozsahVlastné (mimo Tailwind) triedyOdstrániť zduplikované triedyUpozorniť na triedy, ktoré sa vzájomne vylučujúZoskupovať responsívne varianty (sm, md, lg...) spoluNechať dynamické triedy v šablónach nedotknutéVýstup

Výstup

Sorter Tailwind tried

Vložte HTML alebo JSX a tento nástroj zmení poradie tried v každom atribúte class a className tak, aby zodpovedalo odporúčanému poriadiu Tailwind CSS – rovnakému poriadiu kategórií používanému oficiálnym prettier-plugin-tailwindcss: prvé rozloženie a pozicionovanie, potom flexbox a grid, rozostupy, veľkosť, typografia, pozadia, okraje, efekty a tak ďalej, s responsívnymi a stavovými modifikátormi (hover:, sm:, dark:) umiestnené za základnou utilitou, ktorú upravujú. Konzistentné poradie robí diffy menšími a pull requesty ľahšie preskúmateľnými, pretože dvaja vývojári, ktorí napíšu "flex p-4 text-white" a "text-white p-4 flex", skončia s identickým výstupom.

Zvolia si, či chcete spracovať celý vložený dokument – prehľadajúc všetky atribúty class a className, ktoré nájde – alebo považujte vstup za jediný osamotený zoznam tried bez čohokoľvek okolo. Tailwind triedy (vaše vlastné triedy komponentov, názvy utility z CSS frameworku, ktoré tento nástroj nepozná) sú udržiavané spolu na začiatku alebo na konci každého zoznamu, namiesto rozptylu v ňom. Zapnite "Odstrániť zduplikované triedy" a odstráňte presné opakovania a "Upozorniť na triedy, ktoré sa vzájomne vylučujú", aby ste označili páry ako p-4 a p-2, alebo block a hidden, ktoré sa navzájom prepíšu pri spoločnom použití – počet sa zobrazí v živom počítadle pod výstupom. "Zoskupiť responsívne varianty spolu" zhromaždí všetky sm:, md: a lg: triedy na konci namiesto prelínania každého vedľa jeho neprefixovaného náprotivku, čo niektoré tímy uprednostňujú na skenovanie na prvý pohľad.

Triedy v rámci šablóny, ktorá obsahuje výraz JavaScriptu, ako sú className={`flex \${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, sú štandardne ponechané nedotknuté, pretože nástroj nemôže vedieť, čo sa premennému vyrenderuje za behu – vypnite "Nechať dynamické triedy nedotknuté", aby ste ich namiesto toho triedy triedili okolo, pričom každý výraz považujete za nepriehľadný token. Výstup ako upravený zdrojový kód, pripravený na vloženie späť do editora, alebo ako čistý triedený zoznam, jeden na riadok.

Všetko beží lokálne vo vašom prehliadači – HTML, JSX alebo zoznam tried, ktorý vložíte, sa nikdy nikam nenahráva. Keď skončíte, skopírujte výsledok, stiahnite ho ako súbor .txt alebo pošlite výstup späť do vstupu, aby ste spustili iný nástroj.

Časté otázky

V akom poradí triedi triedy?

V rovnakom odporúčanom poradí kategórií ako úradný plugin Tailwindu: rozloženie, flexbox/grid, rozostupy, veľkosť, typografia, pozadia, okraje, efekty, filtre, prechody, transformácie a interaktivita, s modifikátormi ako hover: a sm: umiestnené za základnou triedou, na ktorú sa vzťahujú.

Funguje s JSX a šablónami, a nie iba s čistým HTML?

Áno. Rozpoznáva class="…", className="…" a className={`…`} šablóny. className nastaviť z premennej alebo hovor funkcií ako clsx(…) nie je možné bezpečne analyzovať a je ponechané tak, ako je.

Čo sa počíta ako "vlastná" trieda?

Akákoľvek trieda, ktorú nástroj nepozná ako Tailwind utility – vaše vlastné triedy komponentov alebo triedy z pluginu, ktorý tento nástroj nepokrýva. Vlastné triedy si zachovávajú relatívne poradie a sú umiestnené na začiatku alebo na konci zoznamu na základe vybranej možnosti.

Ako detekuje konfliktné triedy?

Označuje bežné prípady: dve triedy, ktoré nastavujú tú istú vlastnosť na základe škály (ako p-4 a p-2) a vzájomne sa vylučujúce kľúčové slová (ako block a hidden alebo text-left a text-right) aplikované s rovnakými modifikátormi. Nejde o vyčerpávajúci linter, ale zachytáva triedy, ktoré sa najčastejšie kradú.

Je môj kód niekde nahraný?

Nie. Triedenie tried beží úplne vo vašom prehliadači – HTML, JSX alebo zoznam tried, ktorý vložíte, nikdy neopustí vaše zariadenie.

Sorter Tailwind tried

Súvisiace nástroje

Sorter Tailwind tried

Časté otázky