Tailwind CSS funciona como um sistema de composição de estilos diretamente no HTML por meio de classes utilitárias. Essas classes representam propriedades CSS específicas e são aplicadas combinadas nos elementos para definir layout, tipografia, cores, espaçamento e muito mais.
A lógica por trás do funcionamento do Tailwind é simples: ao invés de escrever CSS, você monta a aparência da interface combinando essas classes utilitárias no seu HTML.
Estilo direto no HTML
No Tailwind, a estilização acontece diretamente no markup. Cada classe representa uma regra isolada.
Exemplo prático:
<div class="bg-white text-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-2">Título</h2>
<p class="text-sm text-gray-600">Conteúdo do parágrafo com espaçamento e cores aplicados via classes.</p>
</div>
Neste exemplo, todas as propriedades visuais — cor de fundo, cor do texto, padding, bordas arredondadas, sombra — são aplicadas diretamente via classes do Tailwind, sem escrever nenhuma regra CSS externa.
Geração do CSS
O Tailwind gera um arquivo CSS com milhares de classes possíveis. Essas classes são baseadas em um conjunto de escalas predefinidas para propriedades como:
-
Espaçamento (padding, margin, gap)
-
Tipografia (font-size, font-weight, line-height)
-
Cores
-
Bordas e sombras
-
Responsividade (breakpoints)
No modo de produção, o Tailwind remove automaticamente todas as classes não utilizadas, gerando um arquivo final leve e otimizado. Esse processo é chamado de purge ou content scanning, e é configurado no tailwind.config.js.
Classes com escopo restrito e sem colisão
Como o Tailwind não depende de nomes de componentes ou seletores genéricos (.button, .card, etc.), ele evita colisões de estilos. As classes são específicas e semânticas em sua função visual, como text-lg, bg-blue-600, p-4.
Essa abordagem ajuda a manter o estilo do projeto coeso e previsível, mesmo em equipes grandes ou projetos extensos.
Responsividade integrada
O Tailwind já vem com classes responsivas baseadas em breakpoints prefixados:
<div class="text-sm md:text-base lg:text-lg">
Texto com tamanho diferente conforme o tamanho da tela.
</div>
-
md:aplica a partir do breakpoint médio (768px) -
lg:aplica a partir do breakpoint grande (1024px)
Isso elimina a necessidade de escrever media queries manualmente na maioria dos casos.
Na próxima página, vamos explorar mais a fundo a arquitetura dos utilitários, explicando como as classes do Tailwind se organizam internamente e como elas se relacionam com o CSS tradicional.