Seřazovač tříd Tailwindu
Uspořádejte utility třídy v atributech class/className do doporučeného pořadí Tailwindu.
Seřazovač tříd Tailwindu
Vložte HTML nebo JSX a tento nástroj změní pořadí tříd v každém atributu class a className tak, aby odpovídalo doporučenému pořadí Tailwind CSS – stejnému pořadí kategorií používaném oficiálním prettier-plugin-tailwindcss: nejdřív rozvržení a poziční, poté flexbox a grid, rozestupy, velikost, typografie, pozadí, ohraničení, efekty a tak dále, s responzivními a stavovými modifikátory (hover:, sm:, dark:) umístěnými za základním utility, který upravují. Konzistentní pořadí zmenšuje diffy a usnadňuje prověřování pull requestů, protože dva vývojáři, kteří napíšou "flex p-4 text-white" a "text-white p-4 flex", skončí se shodným výstupem.
Zvolte, zda chcete zpracovat celý vložený dokument – skenováním všech atributů class a className, které nalezne – nebo považujte vstup za jeden samostatný seznam tříd bez ničeho okolo. Vlastní třídy (vaše třídy komponent, názvy utility z CSS frameworku, které tento nástroj nepozná) jsou udržovány pohromadě na začátku nebo na konci každého seznamu, místo aby byly rozptýleny. Zapněte "Odstranit duplicitní třídy" k vypuštění přesných opakování a "Upozornit na třídy, které se vzájemně vylučují" k označení párů, jako jsou p-4 a p-2, nebo block a hidden, které se navzájem přepíšou při společném použití – počet se zobrazí v živém počítadle pod výstupem. "Seskupit responzivní varianty dohromady" soustředí všechny sm:, md: a lg: třídy na konci místo prokládání jednotlivých vedle jejich nepředsazeného protějšku, což někteří tímy preferují pro skenování na první pohled.
Třídy v rámci šablony, která obsahuje výraz JavaScriptu, jako jsou className={`flex \${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, jsou ve výchozím nastavení ponechány nedotčené, protože nástroj nemůže vědět, co se proměnná vyrenderuje za běhu – vypněte "Ponechat dynamické třídy nedotčené", abyste místo toho třídily kolem nich, přičemž každý výraz považujete za neprůhledný token. Výstup jako upravený zdrojový kód, připravený k vložení zpět do editoru, nebo jako čistý seřazený seznam, jeden na řádek.
Všechno běží lokálně ve vašem prohlížeči – HTML, JSX nebo seznam tříd, který vložíte, se nikdy nenahráva nikam. Až skončíte, zkopírujte výsledek, stáhněte si jej jako soubor .txt nebo pošlete výstup zpět do vstupu a spusťte na něm další nástroj.