Tailwind osztályrendezés
Utility osztályok rendezése a class / className attribútumokban Tailwind ajánlott sorrendje szerint.
Tailwind osztályrendezés
Illesszen be HTML vagy JSX kódot, és ez az eszköz átrendezi az összes class és className attribútumban szereplő osztályokat a Tailwind CSS ajánlott sorrendje szerint — ugyanez a kategóriasor, amelyet a hivatalos prettier-plugin-tailwindcss használ: elöl az elrendezés és pozicionálás, majd a flexbox és grid, térköz, méretezés, tipográfia, háttérek, szegélyek, effektek és így tovább, az aktív és állapotmódosítók (hover:, sm:, dark:) az attribútum után helyezve. Az egységes sorrend kisebb diffeket eredményez és könnyebbé teszi a pull requestek felülvizsgálatát, mivel két fejlesztő, aki "flex p-4 text-white" és "text-white p-4 flex" szöveget ír, azonos kimenetel.
Válassza ki, hogy a teljes beillesztett dokumentumot feldolgozza — minden class és className attribútumot megkeres — vagy az input egy egyszerű, semmi más körül nem lévő osztálylista. A nem Tailwind osztályok (saját komponens osztályok, vagy olyan CSS keretrendszer utility nevek, amelyeket ez az eszköz nem ismer fel) az egyes listák eleje vagy vége közelében maradnak az egész listán szétszórtan helyett. A "Ismétlődő osztályok eltávolítása" bekapcsolásával pontosan ismétlődő elemeket dobhat el, a "Figyelmeztetés az egymást kioltó osztályokra" pedig olyan párokat jelöl meg, mint p-4 és p-2, vagy block és hidden, amely egymást felülírják alkalmazott együtt — a szám megjelenik az output alatti élő számlálóban. A "Válaszkész variánsok csoportosítása" az összes sm:, md: és lg: osztályt az végére gyűjti az egyes unprefixed másolatai mellett, amely egyes csapatok inkább így ellenőrzik.
A template literálban levő osztályok, amelyek JavaScript kifejezést tartalmaznak, mint className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, alapértelmezetten érintetlenek maradnak, mivel az eszköz nem tudhatja, mit fog adni vissza egy változó futási időben — kapcsolja ki a "A dinamikus osztályokat érintetlenül hagyja" beállítást, ha az inkább körülöttük rendezi, és egyes kifejezéseket átlátszó tokenként kezeli. Az output módosított forráskódként kerül kimenetre, készen az editorba való visszabeillesztéshez, vagy egyszerű rendezett listaként, osztályonként egy sorban.
Mindenki helyileg fut a böngészőjében — a beillesztett HTML, JSX vagy osztálylista soha nem kerül fel sehova. Ha kész vagy, másolja ki az eredményt, töltse le .txt fájlként, vagy küldje vissza a kimenetet az input eszközbe egy másik eszköz futtatásához.