Ordinatore di classi Tailwind
Ordina le classi utility negli attributi class/className secondo l'ordine consigliato da Tailwind.
Ordinatore di classi Tailwind
Incolla HTML o JSX e questo strumento riordina le classi in ogni attributo class e className per corrispondere all'ordine consigliato da Tailwind CSS — lo stesso ordine di categorie utilizzato dal plugin ufficiale prettier-plugin-tailwindcss: prima layout e posizionamento, poi flexbox e grid, spaziatura, dimensionamento, tipografia, sfondi, bordi, effetti e così via, con modificatori responsive e di stato (hover:, sm:, dark:) posizionati dopo l'utility base che modificano. Un ordine coerente riduce i diff e rende più facile la revisione dei pull request, poiché due sviluppatori che scrivono "flex p-4 text-white" e "text-white p-4 flex" si ritrovano con output identico.
Scegli se elaborare l'intero documento incollato — scansionando ogni attributo class e className che trova — o trattare l'input come una semplice lista di classi senza niente altro intorno. Le classi non-Tailwind (le tue classi di componenti personalizzate, nomi utility di altri framework) rimangono insieme all'inizio o alla fine di ogni elenco anziché sparse. Attiva "Rimuovi classi duplicate" per eliminare le ripetizioni esatte, e "Avvisa classi che si annullano" per segnalare coppie come p-4 e p-2, o block e hidden, che si annullano quando applicate insieme — il conteggio appare nel tally live sotto l'output. "Raggruppa varianti responsive" raggruppa ogni classe sm:, md: e lg: alla fine invece di intercalarle accanto al loro equivalente senza prefisso, che alcuni team preferiscono per la scansione a colpo d'occhio.
Le classi all'interno di un template literal che contengono un'espressione JavaScript, come className={`flex \${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, rimangono invariate per impostazione predefinita poiché lo strumento non può sapere cosa renderizzerà una variabile a runtime — disattiva "Lascia le classi in espressioni dinamiche invariate" per ordinarle comunque, trattando ogni espressione come un token opaco. Output come codice sorgente modificato, pronto da incollare nel tuo editor, o come elenco ordinato semplice, una classe per riga.
Tutto funziona localmente nel tuo browser — l'HTML, JSX o la lista di classi che incolli non viene mai caricata da nessuna parte. Quando hai finito, copia il risultato, scaricalo come file .txt, o invia l'output all'input per eseguire un altro strumento su di esso.