Tailwind CSS: o que é, como instalar versão 4 e primeiros passos

O Tailwind CSS é um framework de CSS feito quase todo de classes utilitárias, onde cada classe aplica geralmente uma única propriedade: p-4 coloca padding (1rem), text-white muda a cor do texto (white), flex coloca display: flex. Em vez de escrever um seletor no arquivo de CSS e depois ligar esse seletor ao HTML, você estiliza o elemento direto no atributo class.

<h1 class="text-2xl font-bold">Olá Mundo</h1>

text-2xl aumenta a fonte e font-bold deixa o texto em negrito. Só isso já é o Tailwind funcionando. Então aprender ele é questão de aprender os nomes das classes relacionadas as propriedades do CSS.

O que é Tailwind CSS e a ideia de utility-first

Utility-first quer dizer que a base do framework são as utilidades, classes pequenas que representam propriedades do CSS, e não componentes prontos. O Tailwind não te dá um .card nem um .btn. Ele te dá border, rounded-md, p-4, bg-blue-600, e você monta o card e o botão com elas, decidindo cada estilo.

Uma dúvida que sempre aparece é se dá para usar o Tailwind sem saber CSS. Não dá, e eu sempre recomendo todos os meus alunos e alunas a aprenderem CSS puro primeiro. Tem gente que vende a ideia de que vai ser mais fácil escrever Tailwind do que CSS, e isso é mentira, porque justify-between só faz sentido para quem sabe o que é um justify-content dentro de um Flexbox. O Tailwind é apenas uma forma diferente de escrever CSS, e quem já domina Flexbox, Grid e Box Model aprende ele muito rápido.

Outro detalhe importante é que o Tailwind não carrega tudo o que ele pode gerar. Ele lê os seus arquivos, encontra as classes que você usou e gera o CSS só delas. Isso é essencial, porque a quantidade de combinações possíveis é enorme, milhares de classes, e se tudo isso fosse para o arquivo final o seu site carregaria um CSS gigante para usar meia dúzia de regras.

Tailwind vs Bootstrap

Frameworks como o Bootstrap, que surgiram há mais de uma década, funcionam com classes pré-construídas. Um link de menu recebe nav-link, que aplica cor, padding, tamanho de fonte e mais algumas coisas de uma vez. Este é um header com um card, escrito em Bootstrap:

bootstrap.html
<header class="container">
  <nav class="d-flex justify-content-between align-items-center py-4">
    <a href="/">Marca</a>
    <ul class="nav">
      <li class="nav-item"><a class="nav-link" href="/">Sobre</a></li>
      <li class="nav-item"><a class="nav-link" href="/">Produtos</a></li>
      <li class="nav-item"><a class="nav-link" href="/">Contato</a></li>
    </ul>
  </nav>
</header>

<section class="container">
  <div class="card" style="width: 18rem">
    <div class="card-body">
      <h5 class="card-title">Bicicleta</h5>
      <p class="card-text">Bicicleta elétrica - R$ 5.000</p>
      <a href="#" class="btn btn-primary">Comprar</a>
    </div>
  </div>
</section>

Olhando para nav, card-text ou btn-primary, é impossível saber o que essas classes aplicam. Você sabe que nav gera algum estilo de navegação, mas qual estilo, com qual espaçamento e qual cor, só descobre inspecionando o elemento ou lendo a documentação. A cor azul do link, por exemplo, não aparece escrita em lugar nenhum, ela é simplesmente o padrão do Bootstrap. Foi por isso que, quando o Bootstrap ficou famoso, surgiu um monte de site com cor primária azul sem que essa fosse a cor da marca, e você batia o olho num site e já sabia que ele usava Bootstrap.

Isso também te prende ao framework. Cada versão nova pode mudar o valor que card-text aplica, e você precisa acompanhar e estudar o framework em si, porque o seu conhecimento de CSS puro não te diz o que btn faz. O mesmo layout, com o mesmo HTML e só as classes trocadas pelas do Tailwind, fica assim:

<header class="container p-4 mx-auto">
  <nav class="flex justify-between">
    <a class="underline text-blue-600 hover:text-blue-800" href="/">Marca</a>
    <ul class="flex gap-6">
      <li><a class="p-2 text-blue-600 hover:text-blue-800" href="/">Sobre</a></li>
      <li><a class="p-2 text-blue-600 hover:text-blue-800" href="/">Produtos</a></li>
      <li><a class="p-2 text-blue-600 hover:text-blue-800" href="/">Contato</a></li>
    </ul>
  </nav>
</header>

<section class="container p-4 mx-auto">
  <div class="w-72 border border-gray-300 p-4 rounded-md">
    <div class="text-gray-800">
      <h5 class="text-2xl mb-2">Bicicleta</h5>
      <p class="mb-4">Bicicleta elétrica - R$ 5.000</p>
      <a class="bg-blue-600 hover:bg-blue-800 text-white py-2 px-4 rounded-md inline-block" href="#">Comprar</a>
    </div>
  </div>
</section>

O container do Tailwind só limita a largura de acordo com o tamanho da tela, sem padding e sem centralizar, e quem decide o resto sou eu, com p-4 e mx-auto (margem automática no eixo x). A borda do card também está lá porque eu coloquei border border-gray-300, e não porque alguém decidiu que todo card tem borda.

Você ainda precisa aprender que bg é background e mb é margin-bottom, mas os nomes fazem sentido e, depois de uma semana, você lê py-2 px-4 rounded-md e já enxerga o botão. Existem sim algumas classes que aplicam várias propriedades de uma vez, mas são exceção.

Tailwind vs CSS inline

Uma vez, quando eu estava divulgando o curso de Tailwind CSS, uma pessoa comentou que tinha usado o Tailwind por alguns dias e não viu nenhuma vantagem em relação a escrever CSS inline. Essa pessoa não entendeu o Tailwind. O CSS inline, no atributo style, é CSS puro e funciona sem biblioteca nenhuma, mas ele não tem como reagir a estado nem a tamanho de tela.

<button class="bg-blue-600 hover:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 text-white md:text-xl py-2 px-4 rounded-md">
  Comprar
</button>

<br />
<br />

<button
  style="
    color: #ffffff;
    background-color: #2563eb;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
  "
>
  Comprar
</button>

Os dois botões têm a mesma cara, mas só o primeiro escurece quando você passa o mouse, ganha um contorno quando recebe foco pelo teclado (aperte Tab dentro do preview) e aumenta a fonte quando a tela passa de 768 pixels. Como você faria isso no segundo? Não tem como, você precisaria abrir um arquivo de CSS e escrever um :hover, um :focus-visible e uma media query. É isso que os modificadores do Tailwind resolvem: hover:, focus-visible: e md: na frente de qualquer classe aplicam aquela classe só naquele estado ou naquela largura.

Usei focus-visible: e não focus: porque o :focus-visible só entra quando o navegador entende que o foco precisa aparecer, como na navegação por teclado. Num clique de mouse o botão recebe foco, mas não mostra o contorno, que é o comportamento que a maioria das interfaces quer.

Como instalar o Tailwind CSS 4 com Vite

A versão atual é a 4. Se o seu projeto usa Vite, o instale o plugin oficial @tailwindcss/vite. Crie o projeto e instale os dois pacotes:

npm create vite@latest meu-projeto
cd meu-projeto
npm install tailwindcss @tailwindcss/vite

Depois registre o plugin na configuração do Vite:

vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

E no seu arquivo de CSS principal, só adicionar uma linha:

src/style.css
@import "tailwindcss";

Esse @import já traz as classes utilitárias e a base de estilos do Tailwind, que funciona como um CSS reset (tira a margem do body, zera os estilos padrão dos títulos e assim por diante). Rode npm run dev e garanta que o CSS está ligado no <head> do seu HTML e as classes já funcionam. Não existe arquivo de configuração em JavaScript nem comando de init.

Como instalar com a Tailwind CLI

Em um projeto só com HTML, o ideal é usar a CLI (Command Line Interface), que na versão 4 fica num pacote separado. Para isso você precisa do Node e do npm instalados na máquina.

npm install tailwindcss @tailwindcss/cli

Crie uma pasta src com dois arquivos, o index.html e o input.css. O input.css é o arquivo de entrada, com o mesmo @import:

src/input.css
@import "tailwindcss";

E para gerar o CSS final:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

O -i é o arquivo de entrada, o -o é o arquivo de saída que o Tailwind vai gerar, e o --watch deixa o comando rodando, gerando o output.css de novo toda vez que você salva o HTML ou o input.css. O HTML linka o arquivo de saída, nunca o de entrada:

src/index.html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="./output.css" />
  </head>
  <body>
    <p class="text-amber-800 text-6xl">Olá Mundo</p>
  </body>
</html>

Se você abrir o output.css depois de salvar, vai encontrar no final as regras de .text-6xl e .text-amber-800, e nenhuma das outras milhares de classes que você não usou. Um erro comum acontece quando você fecha o editor, abre no dia seguinte, coloca uma classe nova e ela não funciona. O Tailwind não está bugado, o comando com --watch simplesmente não está rodando, e sem ele o output.css não é atualizado. As classes que já estavam no arquivo continuam funcionando, por isso o problema confunde.

Recomendo muito também instalar no VS Code a extensão Tailwind CSS IntelliSense, da Tailwind Labs. Ela autocompleta as classes enquanto você digita e, quando você passa o mouse em cima de w-40, mostra o CSS que aquela classe gera. Eu não escreveria Tailwind sem ela, porque sem o autocomplete você fica chutando nome de classe ou com a documentação aberta o tempo todo.

Primeiros passos: espaçamento, cores, tipografia e grid

As classes de espaçamento seguem uma escala (1,2,3,4…). Cada número vale 0.25rem, então p-4 é 1rem (16px no tamanho de fonte padrão) e p-8 é 2rem (32px). A conta é sempre multiplicar por 4 para chegar nos pixels, e essa lógica vale para p, m, gap, w e várias outras. As letras depois do p ou do m dizem a direção: px é o eixo x (esquerda e direita), py é o eixo y (cima e baixo), mt é margin-top e mb é margin-bottom.

As cores vêm de uma paleta pronta, com nomes como blue, amber (um tom de amarelo) e red, e tons de 50 a 950, do mais claro para o mais escuro. O prefixo diz onde a cor vai: text-blue-600 muda a cor do texto, bg-blue-600 o fundo e border-blue-600 a borda. Na tipografia, text-xl, text-2xl e text-6xl mudam o tamanho, e font-bold ou font-extrabold mudam o peso.

Para definirmos media-queries o Tailwind possui uma forma bem inteligente de definição das classes, mas você colocar o nome do breakpoint como sm: ou md: na frente da classe, que a mesma vai passar a ser aplicada apenas naquele breakpoint específico. O Tailwind é mobile-first, o que quer dizer que a classe sem prefixo vale para todas as telas, e uma classe com sm: vale a partir de 640 pixels, com md: a partir de 768, com lg: a partir de 1024.

<section class="p-4">
  <h2 class="text-2xl font-bold text-gray-800 mb-4">Produtos</h2>
  <ul class="grid gap-4 sm:grid-cols-2 md:grid-cols-3">
    <li class="p-4 border border-gray-300 rounded-md hover:shadow-lg transition">
      <h3 class="text-xl font-bold">Bicicleta</h3>
      <p class="text-gray-600">R$ 5.000</p>
    </li>
    <li class="p-4 border border-gray-300 rounded-md hover:shadow-lg transition">
      <h3 class="text-xl font-bold">Patinete</h3>
      <p class="text-gray-600">R$ 2.500</p>
    </li>
    <li class="p-4 border border-gray-300 rounded-md hover:shadow-lg transition">
      <h3 class="text-xl font-bold">Capacete</h3>
      <p class="text-gray-600">R$ 300</p>
    </li>
  </ul>
</section>

No celular os produtos ficam um embaixo do outro, porque grid sozinho cria uma coluna. A partir de 640 pixels o sm:grid-cols-2 divide em duas colunas, e a partir de 768 o md:grid-cols-3 coloca os três lado a lado.

Cor da marca com @theme

A paleta do Tailwind é boa, mas se você usar a mesma você corre o risco de criar um tema genérico para o seu site, já que qualquer site usando Tailwind possui acesso a mesma. O ideal é definir as cores da sua marca. Basta definir a cor no @theme, direto no CSS, como uma variável que segue o padrão --color-nome-tom:

src/input.css
@import "tailwindcss";

@theme {
  --color-verde-200: #acef75;
  --color-verde-400: #17e880;
  --color-verde-900: #0f1c15;
}

Só com isso o Tailwind cria bg-verde-200, text-verde-900, border-verde-200, from-verde-400 e todas as outras classes de cor com esse nome. E como continuam sendo variáveis de CSS, você também pode usar var(--color-verde-200) num CSS normal, em um box-shadow, por exemplo. Junto com o @apply, que aplica classes do Tailwind dentro de um seletor, dá para montar um botão da marca:

@theme {
  --color-verde-200: #acef75;
  --color-verde-400: #17e880;
  --color-verde-900: #0f1c15;
}

.btn {
  @apply rounded-full border border-verde-200 bg-linear-to-b from-verde-200 to-verde-400 px-5 py-2 text-verde-900 transition hover:contrast-200;
  box-shadow: 0 1px 4px 1px var(--color-verde-200);
}

<div class="p-8 bg-verde-900">
  <button class="btn">Assinar</button>
</div>

O @apply vale para quando um conjunto de classes se repete em muitos lugares, como um botão que aparece no site inteiro. Fora isso, eu deixo as classes no HTML mesmo, porque o ganho do Tailwind está justamente em não precisar inventar nome de classe para cada elemento.

Eu gostei muito do Tailwind, e olha que eu sou difícil de gostar de frameworks/bibliotecas. O que mais pesa para mim é a restrição: a escala de espaçamento e a paleta limitam as escolhas, e tudo o que restringe algo muito livre ajuda quem trabalha em equipe, porque as pessoas sabem o que usar em vez de inventar um padding de 13 pixels em cada tela.