Sorter clase Tailwind
Ordona clase utility în atriburi class/className în ordinea recomandată Tailwind.
Sorter clase Tailwind
Lipește HTML sau JSX și acest instrument reorganizează clasele din fiecare atribut class și className pentru a se potrivi ordinii recomandate a CSS-ului Tailwind — aceeași ordine de categorii folosită de pluginul oficial prettier-plugin-tailwindcss: layout și poziționare mai întâi, apoi flexbox și grid, spațiere, dimensionare, tipografie, funduri, borduri și efecte, cu modificatori responsivi și de stare (hover:, sm:, dark:) plasați după clasa de bază pe care o modifică. O ordine consistentă face diff-urile mai mici și pull request-urile mai ușor de revizuit, deoarece doi dezvoltatori care scriu "flex p-4 text-white" și "text-white p-4 flex" ajung cu output identic.
Alege dacă dorești să procesezi tot documentul lipit — scanând fiecare atribut class și className găsit — sau tratează intrarea ca o singură listă simplă de clase. Clase non-Tailwind (propriile tale clase de componentă, nume de utility dintr-un framework CSS pe care acest instrument nu le recunoaște) sunt păstrate împreună la început sau la final ale fiecărei liste în loc să fie dispersate. Activează "Elimină clase duplicate" pentru a șterge repetiții exacte, și "Avertizează despre clase care se anulează reciproc" pentru a semnala perechi ca p-4 și p-2, sau block și hidden, care se anulează atunci când sunt aplicate împreună — contul apare în tallyul live de sub rezultat. "Grupează variantele responsive împreună" grupează fiecare clasă sm:, md: și lg: la final în loc să le intercalezi lângă omologul lor fără prefix, ceea ce unele echipe preferă pentru a scana rapid.
Clasele din interiorul unui literal template cu o expresie JavaScript, ca className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, sunt lăsate neatinse implicit din moment ce instrumentul nu poate ști ce va reda o variabilă la runtime — dezactivează "Lasă clase dinamice neatinse" pentru a le ordona în schimb. Output ca cod sursă modificat, gata de lipit înapoi în editorul tău, sau ca o listă simplă ordonată, o clasă pe rând.
Totul funcționează local în browserul tău — HTML-ul, JSX-ul sau lista de clase pe care o lipești nu ajunge niciodată nicăieri. Când ai terminat, copiază rezultatul, descarcă ca fișier .txt, sau trimite rezultatul înapoi la input pentru a executa un alt instrument pe el.