Arquitetura dos utilitários
Explore o Tailwind CSS, seu sistema de classes utilitárias e arquitetura utility-first. Simplifique o desenvolvimento, crie designs responsivos e mantenha seu CSS limpo e reutilizável.
O Tailwind CSS é estruturado com base em um sistema de classes utilitárias. Cada classe representa uma única responsabilidade de estilo e segue uma convenção de nomes simples, previsível e altamente consistente.
Essa arquitetura elimina a necessidade de criar nomes de classes personalizados, mantendo o CSS limpo, enxuto e altamente reutilizável.
Organização das classes
As classes do Tailwind são divididas por função visual, não por componente. Isso torna a estrutura lógica e intuitiva.
Exemplos por categoria:
| Categoria | Exemplo de Classe | Descrição |
|---|---|---|
| Espaçamento | p-4, mt-2, gap-6 | Padding, margin, espaçamento entre elementos |
| Tipografia | text-xl, font-bold | Tamanho de fonte, peso, espaçamento entre linhas |
| Cores | bg-red-500, text-white | Cores de fundo, texto, borda |
| Layout | flex, grid, block | Definição de display e estrutura de layout |
| Tamanhos | w-64, h-32, max-w-sm | Largura, altura, tamanhos máximos |
| Bordas | rounded, border, border-gray-200 | Controle de bordas e contornos |
| Efeitos visuais | shadow-md, opacity-75 | Sombra, opacidade, blur, transições |
| Responsividade | md:flex, lg:hidden | Aplica estilos com base no tamanho da tela |
Convenção de nomes
A nomenclatura segue um padrão lógico:
[propriedade]-[valor]Exemplos:
-
p-4: padding com valor 4 (1rem) -
text-blue-600: cor do texto azul no nível 600 -
rounded-lg: bordas arredondadas no tamanho grande -
grid-cols-3: grade com 3 colunas
Essa lógica permite ao desenvolvedor entender o que uma classe faz apenas olhando para ela.
Composição direta no HTML
A arquitetura utility-first incentiva a composição direta de estilos combinando múltiplas classes no próprio HTML.
Exemplo:
<div class="bg-white shadow-md p-6 rounded-md max-w-md">
<h3 class="text-lg font-semibold text-gray-800">Título</h3>
<p class="text-sm text-gray-600 mt-2">Texto descritivo com espaçamento e hierarquia tipográfica.</p>
</div>Não é necessário declarar .card, .title ou .description em um CSS separado.
Variantes e estados
O Tailwind também organiza suas utilitárias em variantes, como hover:, focus:, active: e breakpoints responsivos como sm:, md:, lg:.
Exemplo combinado:
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
Salvar
</button>A combinação dessas variantes com as classes utilitárias é o que dá poder e flexibilidade ao Tailwind.