Introdução

O Tailwind CSS é um framework de CSS que permite a criação de interfaces de usuário de forma rápida e eficiente. Ele é composto por uma série de classes utilitárias que podem ser aplicadas diretamente no HTML, sem a necessidade de escrever CSS customizado.

Abaixo apresentamos uma visão geral dos principais conceitos e funcionalidades do Tailwind CSS.

Instalação

É recomendado que se adicione o Tailwind CSS durante a criação do projeto, para que ele possa ser configurado corretamente e mais facilmente.

No nosso ecossistema, o Tailwind CSS já está incluso no projeto, então não é necessário instalar nada. Porém, para instalar o Tailwind CSS em seu projeto, você pode utilizar o npm ou o yarn. Basta executar o seguinte comando:

npm install -D tailwindcss @tailwindcss/postcss postcss

Configuração

Veremos agora como configurar o Tailwind CSS em um projeto Next.js.

PostCSS

O PostCSS também deve ser instalado para que o Tailwind CSS funcione corretamente.

Após a instalação, o arquivo de configurações do PostCSS também deve ser editado para que o Tailwind CSS seja carregado corretamente. Adicione o Tailwind CSS como um plugin no arquivo postcss.config.js:

1

O arquivo de configuração é do tipo mjs é um arquivo JavaScript Module.

Também é preciso adicionar as diretivas de importação do Tailwind CSS no topo arquivo de estilos principal do projeto. No nosso caso, o arquivo globals.css:

1

Será nesse arquivo onde o Tailwind injetará todas as classes utilitárias que serão utilizadas no projeto.

Uso

É fortemente recomendada a instalação da extensão Tailwind CSS IntelliSense no Visual Studio Code para facilitar a utilização das classes utilitárias, a extensão tem autocomplete, linting, preview e highlighting de sintaxe.

Com o Tailwind CSS configurado, as classes utilitárias podem ser aplicadas diretamente no HTML. Por exemplo:

1

O código acima é equivalente à ambos arquivos abaixo:

1

1

Por meio do Tailwind, conseguimos criar interfaces de usuário de forma mais rápida e eficiente, sem a necessidade de escrever CSS mais longo em arquivo separado, criando classes ou utilizando seletores de elementos.

Para mais informações sobre as classes utilitárias disponíveis, consulte a documentação oficial. Lembrando que estamos utilizando a versão 3 do Tailwind CSS. A melhor maneira de aprender é experimentando e lendo a documentação quando necessário.

Customização

O Tailwind CSS permite a customização de cores, espaçamentos, tipografia, entre outros. Para isso, é necessário editar o arquivo de configuração do Tailwind CSS. Veja abaixo um exemplo de customização:

1

No arquivo acima, podemos ver a definição de onde o nosso conteúdo está, para que o Tailwind saiba onde deve ser aplicado. Assim como, vemos em destaque a customização das cores do tema do Tailwind CSS. As cores são definidas como variáveis CSS, que podem ser utilizadas diretamente no código.

Veja a definição das variáveis relacionadas ao arquivo acima (para o tema claro e escuro):

1

Este também é o método usado pelo Shadcn para customizar o Tailwind CSS.

Modificadores

Os modificadores do Tailwind CSS permitem a customização de classes utilitárias, como cores, tamanhos, espaçamentos, entre outros. É um dos mais poderosos, permitindo a criação e aplicação de estilos condicionalmente com base em estados, tamanhos de tela e outros fatores. Por meio deles que podemos criar interfaces de usuário responsivas e acessíveis.

Tipos de Modificadores

Os modificadores do Tailwind CSS seguem um sistema de prefixos que indicam o tipo e quando o estilo deve ser aplicado. Alguns dos principais modificadores são:

1. Modificadores de Estado:

Os modificadores de estado permitem a customização de classes utilitárias com base em estados, como hover, focus, active, disabled, entre outros. Por exemplo:

1

• hover:bg-blue-700: Altera a cor do fundo do botão quando o cursor passa sobre ele.
• focus:ring-2: Adiciona um anel ao redor do botão quando ele está em foco.
• active:bg-blue-900: Altera a cor do fundo do botão quando ele está ativo.
2. Modificadores Responsivos

O Tailwind segue uma abordagem mobile-first.

Os modificadores responsivos permitem a customização de classes utilitárias com base em tamanhos de tela (da tela anterior até essa). Veja abaixo os breakpoints disponíveis:

• sm: Small (640px)
• md: Medium (768px)
• lg: Large (1024px)
• xl: Extra Large (1280px)
• 2xl: Extra Extra Large (1536px)

Você também pode criar classes utilitárias customizadas com base em tamanhos de tela, como demonstrado na seção de customização.

Veja um exemplo prático de modificadores responsivos:

1

• text-sm: Define o tamanho do texto como 0.875rem (14px) em telas por padrão.
• md:text-lg: Define o tamanho do texto como 1.125rem (18px) em telas médias (a partir de 768px).
• lg:text-xl: Define o tamanho do texto como 1.25rem (20px) em telas grandes (a partir de 1024px).
3. Modificadores para Modo Escuro

Os modificadores para modo escuro permitem a customização de classes utilitárias com base no modo de cor do sistema. Por exemplo:

1

• bg-white: Define a cor de fundo como branco por padrão.
• dark:bg-gray-900: Define a cor de fundo como cinza escuro em telas escuras.
• text-black: Define a cor do texto como preto por padrão.
• dark:text-white: Define a cor do texto como branco em telas escuras.
4. Modificadores de grupo

Os modificadores de grupo permitem a aplicação de classes utilitárias em um grupo de elementos. Por exemplo:

1

A classe group no elemento pai permite que group-hover:text-black seja aplicado quando o pai estiver em estado hover.

5. Modificadores de Par (Peer Modifiers)

Os modificadores peer permitem que elementos irmãos respondam a mudanças de estado em um elemento adjacente.

1

Quando a caixa de seleção é marcada, peer-checked:bg-blue-500 é aplicado ao elemento adjacente label.

6. Variantes Arbitrárias

Os modificadores personalizados colchetes ([]), possibilitam a criação de classes utilitárias customizadas. Por exemplo:

1

A classe [>p]:text-red-500 aplica a cor vermelha aos elementos p dentro do elemento pai.