O Tailwind CSS oferece um arquivo de configuração altamente personalizável, onde é possível modificar o tema padrão para se adequar melhor aos requisitos de design do seu projeto. Este capítulo abordará como personalizar paletas de cores, definir fontes personalizadas e ajustar a escala de espaçamento.

Observação

Para personalizar qualquer estilo padrão do Tailwind CSS, é necessário atualizar o arquivo tailwind.config.js.

Personalização de Paletas de Cores

É possível adicionar novas cores, estender as existentes ou substituir completamente a paleta de cores padrão.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1DA1F2',
        customGreen: '#17BF63',
        customRed: '#E0245E',
      },
    },
  },
};

Em seguida, ao adicionar uma paleta de cores personalizada, ela ficou disponível para uso no HTML.

<div class="bg-customBlue text-white p-4">Custom Blue Background</div>
<div class="bg-customGreen text-white p-4">Custom Green Background</div>
<div class="bg-customRed text-white p-4">Custom Red Background</div>

Definição de fontes personalizadas

Também é possível personalizar as fontes no Tailwind CSS adicionando novas famílias tipográficas ao arquivo de configuração.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Helvetica', 'Arial', 'sans-serif'],
        serif: ['Georgia', 'serif'],
        mono: ['Courier New', 'monospace'],
      },
    },
  },
};

Depois, altere o HTML.

<div class="font-sans text-lg">Sans-serif Font</div>
<div class="font-serif text-lg">Serif Font</div>
<div class="font-mono text-lg">Monospace Font</div>

Personalização da Escala de Espaçamento

O Tailwind CSS fornece uma escala de espaçamento padrão, mas é possível personalizá-la para atender às necessidades do design adicionando ou modificando valores de espaçamento no arquivo de configuração.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
};

Uso em HTML.

<div class="p-72 bg-gray-200">Padding 18rem</div>
<div class="p-84 bg-gray-300">Padding 21rem</div>
<div class="p-96 bg-gray-400">Padding 24rem</div>

Nota

O princípio foi apresentado. Qualquer classe utilitária pode ser estendida com funcionalidades no arquivo de configuração. A documentação sobre este tema pode ser encontrada aqui.