Por Que Ordenar Classes do Tailwind CSS?
A ordem das classes do Tailwind CSS afeta a legibilidade e a manutenção. O plugin oficial do Prettier para Tailwind recomenda uma sequência específica: layout, flexbox/grid, espaçamento, dimensionamento, tipografia, fundos, bordas, efeitos, transições, transformações e interatividade. Uma ordenação consistente facilita revisões de código e reduz diffs sem significado. Esta ferramenta organiza as classes seguindo essa ordem recomendada.
Como Ordenar Classes do Tailwind
- 1Cole a string de classes do Tailwind CSS na área de entrada.
- 2A ferramenta ordenará as classes instantaneamente conforme a ordem oficial recomendada.
- 3Ative Remove duplicates para eliminar classes repetidas.
- 4Clique em Copy para copiar a string de classes ordenada.
Casos de Uso Comuns
Limpeza de código
Organize strings de classes desordenadas ao refatorar componentes ou revisar pull requests.
Consistência de estilo
Mantenha uma ordem consistente de classes em toda a equipe quando o plugin do Prettier não estiver configurado.
Formatação rápida
Ordene e remova duplicatas de classes copiadas do DevTools do navegador ou de ferramentas de design.
Perguntas frequentes
A ferramenta segue a ordem oficial do Tailwind?
Sim. A ordenação segue as convenções do plugin do Prettier para Tailwind CSS: layout, flexbox/grid, espaçamento, dimensionamento, tipografia, fundos, bordas, efeitos, transições, transformações e interatividade.
Como os prefixos responsivos são tratados?
Classes com prefixos responsivos (sm:, md:, lg:, xl:) são ordenadas depois das classes base, seguindo a ordem dos breakpoints. Variantes de estado (hover:, focus:) são agrupadas de maneira semelhante.
O que acontece com classes personalizadas?
Classes personalizadas que não correspondem a utilitários padrão do Tailwind são colocadas no final da saída ordenada.
As classes inseridas são enviadas para um servidor?
Não. A ordenação e a remoção de duplicatas são realizadas localmente no navegador, sem envio do conteúdo para um backend.