Organizador de classes Tailwind
Ordene classes utilitárias em atributos class/className conforme a ordem recomendada do Tailwind.
Organizador de classes Tailwind
Cole HTML ou JSX e esta ferramenta reorganiza as classes dentro de cada atributo class e className para corresponder à ordem recomendada do Tailwind CSS — a mesma ordem de categorias usada pelo plugin oficial prettier-plugin-tailwindcss: layout e posicionamento primeiro, depois flexbox e grid, espaçamento, dimensionamento, tipografia, fundos, bordas e efeitos, com modificadores responsivos e de estado (hover:, sm:, dark:) colocados após a classe base que modificam. Uma ordem consistente torna os diffs menores e os pull requests mais fáceis de revisar, já que dois desenvolvedores que escrevem "flex p-4 text-white" e "text-white p-4 flex" acabam com output idêntico.
Escolha se deseja processar todo o documento colado — procurando em cada atributo class e className encontrado — ou trate a entrada como uma única lista simples de classes. Classes não-Tailwind (suas próprias classes de componente, nomes de utilidades de um framework CSS que esta ferramenta não reconhece) são mantidas juntas no início ou final de cada lista em vez de dispersas. Ative "Remover classes duplicadas" para descartar repetições exatas, e "Avisar sobre classes que se cancelam mutuamente" para sinalizar pares como p-4 e p-2, ou block e hidden, que se sobrescrevem quando aplicados juntos — a contagem aparece no tally ao vivo abaixo da saída. "Agrupar variantes responsivas juntas" agrupa cada classe sm:, md: e lg: no final em vez de intercalá-la próxima à sua contraparte sem prefixo, o que alguns times preferem para escanear rapidamente.
Classes dentro de um template literal com uma expressão JavaScript, como className={`flex ${isActive ? 'bg-red-500' : 'bg-blue-500'} p-4`}, são deixadas intactas por padrão já que a ferramenta não pode saber o que uma variável renderizará em tempo de execução — desative "Deixar classes dinâmicas intactas" para ordená-las em vez disso. Exporte como código-fonte modificado, pronto para colar de volta no seu editor, ou como uma lista simples ordenada, uma classe por linha.
Tudo funciona localmente no seu navegador — o HTML, JSX ou lista de classes que você cola nunca é enviado para lugar nenhum. Quando terminar, copie o resultado, baixe como arquivo .txt, ou envie a saída de volta para o input para executar outra ferramenta nela.