Arquitetura dos utilitários

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.

Na próxima página, vamos explorar o arquivo tailwind.config.js, que é o centro de personalização do framework.