As classes utilitárias no Tailwind CSS são classes pequenas e de propósito único que podem ser aplicadas diretamente aos elementos HTML para estilização. Cada classe utilitária corresponde a uma propriedade e valor CSS específicos, permitindo criar designs personalizados rapidamente sem a necessidade de escrever CSS personalizado.

Características Principais

• Cada classe utilitária executa uma única função, como definir margem, preenchimento, cor ou tamanho da fonte;
• É possível combinar várias classes utilitárias para obter estilos complexos;
• O uso de classes utilitárias predefinidas garante uma estilização consistente em todo o projeto;
• O Tailwind oferece variantes responsivas das classes utilitárias para lidar facilmente com diferentes tamanhos de tela.

Exemplo

Explicação

1. p-4 adiciona um preenchimento de 1rem (16px) em todos os lados;
2. bg-blue-500 define a cor de fundo para um tom específico de azul;
3. text-white define a cor do texto para branco;
4. text-xl define o tamanho da fonte para um tamanho maior;
5. font-bold deixa o texto em negrito;
6. mt-2 adiciona uma margem superior de 0.5rem (8px).

Nos próximos capítulos, estudaremos cada classe em detalhes. Não é necessário memorizar todas as classes apresentadas aqui.