Tailwind CSS

Tailwind CSS é um framework CSS utility-first que estiliza a página com pequenas classes de propósito único escritas diretamente no HTML. Classes como p-4, text-center e bg-blue-500 definem, cada uma, um único estilo. Os desenvolvedores combinam essas classes para construir qualquer design sem escrever muito CSS próprio.

CSS utility-first significa construir um design a partir de muitas classes pequenas que fazem uma coisa só, em vez de escrever uma classe própria para cada componente. Um botão ganha sua aparência com classes de espaçamento interno, cor, arredondamento de borda e peso da fonte. Essa abordagem mantém os estilos perto da marcação e evita folhas de estilo enormes que só crescem.

Os desenvolvedores preferem o Tailwind CSS porque ele acelera a estilização e mantém pequeno o arquivo CSS final. Não é preciso inventar nomes de classes nem alternar entre arquivos HTML e CSS a cada alteração. O Tailwind CSS também oferece uma escala consistente de espaçamentos, cores e tamanhos de fonte, o que mantém o design organizado.

O Tailwind CSS oferece classes utilitárias de baixo nível para construir um design próprio, enquanto o Bootstrap oferece componentes prontos como navbars, cards e modais. O Bootstrap é mais rápido para um visual padrão com pouco trabalho de design. O Tailwind CSS é melhor quando o projeto precisa de um design único sem brigar com um tema padrão.

O Tailwind CSS é instalado pelo npm e conectado à ferramenta de build do projeto, como Vite, PostCSS ou a CLI do Tailwind. Na versão 4 do Tailwind CSS, você adiciona o pacote e o importa no topo do arquivo CSS principal com @import "tailwindcss". O guia oficial de instalação traz passos curtos para cada framework comum, incluindo Laravel, Next.js e Vite.

O Tailwind CSS serve bem para iniciantes que já entendem as propriedades básicas do CSS, como margin, padding, flexbox e grid. Cada classe do Tailwind corresponde a uma propriedade CSS real, então aprender CSS primeiro torna as classes fáceis de ler. Iniciantes que pulam o básico de CSS costumam ter dificuldade para corrigir layouts no Tailwind CSS.

A maioria dos desenvolvedores que sabe CSS fica produtiva com o Tailwind CSS em poucos dias. Os nomes das classes seguem padrões claros, então aprender um grupo de classes ajuda a adivinhar o resto. Dominar variantes responsivas, temas personalizados e padrões de componentes leva algumas semanas de uso real.

O design responsivo no Tailwind CSS funciona acrescentando prefixos de breakpoint como sm:, md: e lg: antes de qualquer classe utilitária. O Tailwind CSS é mobile-first, então uma classe sem prefixo vale para todas as telas, e uma classe com prefixo vale a partir daquele breakpoint. Por exemplo, text-sm md:text-lg dá texto pequeno no celular e texto maior em telas mais largas.

Os breakpoints padrão do Tailwind CSS são sm em 640 pixels, md em 768 pixels, lg em 1024 pixels, xl em 1280 pixels e 2xl em 1536 pixels. Cada breakpoint é uma largura mínima, o que combina com a abordagem mobile-first do Tailwind. Um projeto pode alterar esses valores ou adicionar novos breakpoints nas configurações do tema.

Você adiciona modo escuro no Tailwind CSS colocando o prefixo dark: antes de qualquer classe, como dark:bg-gray-900. Por padrão, o Tailwind CSS segue a configuração do sistema operacional do visitante. Para permitir que o usuário alterne o modo escuro com um botão, configure a variante dark para depender de uma classe ou de um atributo data na página.

Na versão 4 do Tailwind CSS, você personaliza cores e fontes com variáveis CSS dentro de um bloco @theme no arquivo CSS principal. Uma variável como --color-brand cria automaticamente classes como bg-brand e text-brand. As versões anteriores usavam um arquivo tailwind.config.js para isso, e essa abordagem ainda funciona na versão 4 por meio de uma opção de compatibilidade.

O Tailwind CSS pode deixar o HTML carregado, porque um único elemento pode levar muitas classes. A maioria das equipes resolve isso transformando os padrões repetidos em componentes do seu framework, como um componente Blade, React ou Vue. Em troca, os estilos ficam visíveis ao lado da marcação, o que torna as alterações rápidas e seguras.

O Tailwind CSS mantém o arquivo CSS pequeno escaneando os arquivos do projeto e gerando apenas as classes que realmente são usadas. Utilitários não usados nunca chegam à folha de estilo final. Um arquivo CSS de produção típico feito com Tailwind CSS é pequeno, mesmo em sites grandes.

A diretiva @apply no Tailwind CSS permite usar classes utilitárias do Tailwind dentro das suas próprias regras CSS. Ela é útil para estilizar conteúdo que você não controla, como o HTML gerado por um editor de texto. A equipe do Tailwind recomenda usá-la com moderação, já que componentes costumam ser uma forma mais limpa de reutilizar estilos.

Sim, o Tailwind CSS funciona muito bem com Laravel, e os projetos Laravel novos já vêm configurados para usá-lo com o Vite. Você escreve as classes do Tailwind nos templates Blade, e o Vite gera o CSS final. Os starter kits do Laravel também usam Tailwind CSS nas telas de login e de painel.

Sim, o Tailwind CSS funciona com React, Vue, Svelte e a maioria dos outros frameworks JavaScript. As classes vão na marcação do componente, por meio de className no React ou class no Vue. Como cada componente guarda as próprias classes, o Tailwind CSS combina bem com frameworks baseados em componentes.

O Tailwind CSS não tem efeito direto no ranqueamento, mas pode ajudar o SEO indiretamente ao manter o arquivo CSS pequeno e as páginas rápidas. A velocidade da página faz parte dos sinais de experiência de página do Google. O conteúdo, a estrutura da página e a semântica do HTML continuam pesando muito mais do que a ferramenta de estilo.

Valores arbitrários no Tailwind CSS permitem usar um valor exato que não está no tema, escrevendo-o entre colchetes. Por exemplo, w-[37%] ou top-[117px] cria na hora uma classe com aquele valor exato. Eles são úteis para casos pontuais, mas um valor usado com frequência deve ir para o tema.

Os estados hover e focus no Tailwind CSS funcionam acrescentando um prefixo de estado como hover:, focus: ou active: antes de uma classe utilitária. Por exemplo, bg-blue-500 hover:bg-blue-600 escurece o botão quando o mouse passa sobre ele. Os prefixos podem ser combinados com breakpoints e modo escuro, como em md:hover:underline.

Não, o Tailwind CSS em si inclui apenas classes utilitárias, e não componentes prontos como modais ou navbars. Os componentes prontos vêm de coleções separadas, como o Tailwind Plus oficial ou bibliotecas da comunidade como daisyUI e Flowbite. Muitas equipes constroem seu próprio pequeno conjunto de componentes sobre os utilitários.

Sim, o Tailwind CSS suporta layouts da direita para a esquerda por meio das variantes rtl: e ltr: e de classes utilitárias lógicas. Classes lógicas como ms-4 e pe-2 definem margem e espaçamento no início ou no fim da linha, então se invertem automaticamente em árabe. Assim, a mesma marcação funciona para páginas em inglês e em árabe.

A versão 4 do Tailwind CSS levou a configuração para dentro do CSS, com o bloco @theme e uma única linha de @import. Ela também trouxe um motor de build mais rápido, detecção automática dos arquivos de conteúdo e recursos modernos de CSS, como cascade layers. A maioria dos projetos que vem da versão 3 pode usar a ferramenta oficial de atualização para adaptar o código.

Talvez você não queira o Tailwind CSS quando o projeto precisa de um conjunto completo de componentes prontos, com quase nenhum design próprio, ou quando a equipe prefere escrever CSS clássico. Uma página estática pequena, com poucos estilos, pode não precisar de framework nenhum. O Tailwind CSS compensa mais em projetos com design próprio que continuam crescendo.

Você mantém as classes do Tailwind CSS organizadas transformando padrões repetidos em componentes e ordenando as classes sempre da mesma forma. O plugin oficial do Prettier para Tailwind CSS ordena as classes automaticamente ao salvar. Definir as cores da marca e os espaçamentos no tema também mantém as classes curtas e consistentes.

Sim, o Tailwind CSS é de código aberto sob a licença MIT, então pode ser usado em projetos pessoais e comerciais. A licença permite usar, modificar e distribuir o Tailwind CSS em qualquer produto. O código-fonte é público no GitHub, onde qualquer pessoa pode lê-lo e relatar problemas.