Arquivo tailwind.config.js

O arquivo tailwind.config.js é o centro de configuração do Tailwind CSS. Ele permite personalizar completamente o comportamento e a aparência do framework, ajustando desde cores e espaçamentos até temas e plugins.

Esse arquivo é gerado automaticamente com o comando:

npx tailwindcss init

Ou com suporte a PostCSS:

npx tailwindcss init -p

Estrutura básica

Um arquivo tailwind.config.js gerado inicialmente contém algo como:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Seção `content`

A propriedade content define os arquivos que o Tailwind deve escanear para identificar quais classes estão em uso. Isso é essencial para que o processo de purge funcione corretamente em produção.

Exemplo:

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
],

Seção `theme`

A seção theme permite redefinir ou estender o design padrão do Tailwind. É aqui que você altera as escalas de espaçamento, cores, fontes, larguras, breakpoints e mais.

Redefinindo um valor:

theme: {
  fontFamily: {
    sans: ['Inter', 'sans-serif'],
  },
}

Extendendo o tema padrão:

theme: {
  extend: {
    colors: {
      primary: '#1e40af',
      secondary: '#64748b',
    },
    spacing: {
      '72': '18rem',
      '84': '21rem',
      '96': '24rem',
    },
  },
}

Seção `plugins`

O Tailwind suporta plugins oficiais e personalizados. Eles permitem estender funcionalidades com novas utilitárias ou componentes.

Exemplo de uso com plugin de formulários:

npm install @tailwindcss/forms

plugins: [
  require('@tailwindcss/forms'),
]

Temas personalizados

Você pode configurar temas globais para cores, fontes e breakpoints, criando uma base visual unificada para seu projeto.

Exemplo com um tema escuro:

darkMode: 'class', // ou 'media'
theme: {
  extend: {
    colors: {
      background: '#1f2937',
      surface: '#374151',
    }
  }
}

Benefícios do uso do config

Centraliza toda a personalização visual
Evita sobrescrita manual de CSS
Permite padronização visual em grandes equipes
Abre espaço para automação com design tokens

Com o tailwind.config.js, o Tailwind deixa de ser apenas um utilitário de classes e se torna um framework de design completo, adaptável a qualquer identidade visual.