Tailwind-klasssorterare
Sortera utility-klasser i class/className-attribut i Tailwinds rekommenderade ordning.
Tailwind-klasssorterare
Klistra in HTML eller JSX och det här verktyget ordnar om klasserna inuti varje class- och className-attribut för att matcha Tailwind CSS:s rekommenderade ordning – samma kategoriordning som den officiella prettier-plugin-tailwindcss använder: layout och positionering först, sedan flexbox och grid, spacing, storlek, typografi, bakgrunder, kanter, effekter och så vidare, med responsiva och tillståndsmodifierare (hover:, sm:, dark:) placerade efter den basklass de ändrar. En konsistent ordning gör diffs mindre och pull requests lättare att granska, eftersom två utvecklare som skriver "flex p-4 text-white" och "text-white p-4 flex" slutar med identisk output.
Välj om du vill bearbeta hela det inklistrade dokumentet – genom att skanna alla class- och className-attribut det hittar – eller behandla inmatningen som en enda lista med klasser utan något annat runt omkring. Icke-Tailwind-klasser (dina egna komponentklasser, utility-namn från ett CSS-ramverk som det här verktyget inte känner igen) hålls tillsammans i början eller slutet av varje lista snarare än spridda genom den. Slå på "Ta bort dubblerade klasser" för att släppa exakta repetitioner, och "Varna om klasser som förnekar varandra" för att flagga par som p-4 och p-2, eller block och hidden, som motsäger varandra när de tillämpas tillsammans – räkningen visas i den aktiva summan under utdata. "Gruppera responsiva varianter tillsammans" klusterar varje sm:, md: och lg:-klass i slutet istället för att sammanvävla var och en bredvid dess oprefixerad motsvarighet, vilket vissa team föredrar för snabb skanning.
Klasser inuti en mall literal som innehåller ett JavaScript-uttryck, som className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, lämnasIntact som standard eftersom verktyget inte kan veta vad en variabel kommer att rendera vid körning – stäng av "Lämna dynamiska klasser orörda" för att sortera runt dem istället, behandla varje uttryck som en ogenomskinlig token. Mata ut den ändrade källkoden, redo att klistra tillbaka i din editor, eller som en vanlig sorterad lista, en klass per rad.
Allt körs lokalt i din webbläsare – HTML, JSX eller klasslistan du klistrar in lämnar aldrig din enhet. När du är klar kopierar du resultatet, laddar ner det som en .txt-fil, eller skickar utdata tillbaka till inmatningen för att köra ett annat verktyg på den.