Temas e personalização avançada

O Tailwind CSS permite que você crie um tema visual completo para o seu projeto, organizando cores, fontes, espaçamentos, tamanhos e estilos em um único ponto central: o seu arquivo CSS principal.

Essa abordagem baseada em CSS nativo transforma seu projeto em um Design System vivo, onde todas as decisões visuais são documentadas e reaplicáveis por meio da diretiva @theme, promovendo consistência e escalabilidade.

O que é um tema?

No contexto do Tailwind, um tema é a definição padronizada de tokens visuais, como:

Cores
Tipografia
Espaçamentos
Larguras e alturas
Bordas e sombras
Breakpoints

Esses tokens são mapeados automaticamente como variáveis CSS e se transformam em classes utilitárias aplicadas diretamente no HTML.

Por que criar um tema?

Garante identidade visual unificada em toda a aplicação.
Facilita a manutenção visual no longo prazo.
Permite escalabilidade com diferentes componentes, marcas ou clientes.
Prepara seu projeto para temas dinâmicos (como modo claro/escuro e multimarcas) de forma nativa.

Estrutura recomendada de um tema

As configurações de tema agora ficam agrupadas dentro da diretiva @theme na sua folha de estilo principal:

CSS

@import "tailwindcss";

@theme {
  /* Escala de cores (incluindo variações semânticas) */
  --color-primary: #1e3a8a;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e40af;
  
  --color-neutral-50: #f8fafc;
  --color-neutral-900: #0f172a;

  /* Fontes do projeto */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Open Sans", sans-serif;

  /* Espaçamentos nomeados */
  --spacing-header: 4rem;
  --spacing-footer: 6rem;
}

Aplicando o tema no HTML

O uso das classes utilitárias no HTML permanece direto, limpo e integrado aos novos tokens definidos:

HTML

<h1 class="text-primary text-3xl font-heading">Título principal</h1>
<p class="text-neutral-900 font-body">Texto do conteúdo.</p>

Temas dinâmicos (ex: multimarcas)

A migração para uma arquitetura baseada em CSS nativo tornou a criação de temas dinâmicos e sistemas multimarcas muito mais simples. Como o Tailwind agora utiliza variáveis CSS sob o capô, você pode alternar os valores dessas variáveis redefinindo seus escopos diretamente no CSS, sem a necessidade de mapeamentos complexos via JavaScript.

CSS

@import "tailwindcss";

/* Tema Padrão (Marca A) */
@theme {
  --color-primary: #1e3a8a;
  --font-heading: "Poppins", sans-serif;
}

/* Alternando para a Marca B usando uma classe de escopo */
.theme-brand-b {
  --color-primary: #10b981;
  --font-heading: "Inter", sans-serif;
}

No HTML, basta aplicar a classe de contexto no elemento pai (como a tag <body>) para que toda a interface mude de cor e tipografia instantaneamente:

HTML

<!-- Exemplo com a Marca B ativa -->
<body class="theme-brand-b">
  <div class="bg-primary text-white font-heading">
    O conteúdo aqui adotará automaticamente os tokens da Marca B
  </div>
</body>

Dicas para organização avançada

Nomeie tokens de forma semântica (primary, success, error, surface) e evite prender o nome da variável a uma cor específica para facilitar mudanças futuras de marca.
Crie padrões de componentes utilizando utilitários personalizados com a diretiva @utility.
Mantenha o arquivo CSS principal limpo importando arquivos de tokens separados (ex: @import "./tokens/colors.css";) caso o seu ecossistema de design cresça muito.

Ferramentas úteis

Tailwind Play: Playground online oficial para testar componentes e diretivas de tema.
Figma Variables / Tokens: Ideal para exportar tokens de design diretamente para o formato de variáveis CSS aceito pelo framework.
Style Dictionary: Gera e exporta tokens multiplataforma compatíveis com a estrutura atual de folhas de estilo.

A personalização avançada com a diretiva @theme simplifica o ecossistema do Tailwind, unindo o poder e a velocidade das classes utilitárias à flexibilidade e padronização das variáveis CSS modernas.