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

O que é Tailwind CSS, como instalar a versão 4 com Vite ou CLI e os primeiros passos com classes de cor, espaçamento, grid, hover e responsivo.

Curso: [Tailwind CSS](https://www.origamid.com/curso/tailwind-css/) · Aula: [Tailwind CSS](https://www.origamid.com/curso/tailwind-css/0101-tailwind-css/), [Tailwind Ambiente](https://www.origamid.com/curso/tailwind-css/0102-tailwind-ambiente/), [Tailwind Instalar 1](https://www.origamid.com/curso/tailwind-css/0103-tailwind-instalar-1/), [Tailwind Instalar 2](https://www.origamid.com/curso/tailwind-css/0103-tailwind-instalar-2/), [Tailwind vs Frameworks](https://www.origamid.com/curso/tailwind-css/0104-tailwind-vs-frameworks/), [Tailwind v3 para v4 1](https://www.origamid.com/curso/tailwind-css/0817-tailwind-v3-para-v4-1/), [Tailwind v3 para v4 2](https://www.origamid.com/curso/tailwind-css/0817-tailwind-v3-para-v4-2/)

URL: https://www.origamid.com/artigos/tailwind-css/

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`.

*Figura: Comparação entre HTML + CSS e Tailwind CSS. No primeiro, o h1 recebe class="titulo" no index.html e o seletor .titulo do style.css aplica font-size: 1.5rem e font-weight: bold. No Tailwind, o mesmo h1 leva class="text-2xl font-bold" direto no HTML: text-2xl aumenta a fonte e font-bold deixa o texto em negrito.*

```html
<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:

```html title="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:

```html
<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.

```html
<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:

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

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

```js title="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:

```css title="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.

```bash
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`:

```css title="src/input.css"
@import "tailwindcss";
```

E para gerar o CSS final:

```bash
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:

```html title="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.

*Figura: Escala de espaçamento do Tailwind: p-1 é padding: 0.25rem (4px), p-2 é 0.5rem (8px), p-3 é 0.75rem (12px), p-4 é 1rem (16px) e p-8 é 2rem (32px), cada uma com uma barra proporcional ao tamanho. Embaixo, a conta número × 4 = pixels, que vale para p, m, gap, w e várias outras classes.*

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.

*Figura: A cor blue do Tailwind em onze tons, do 50 (mais claro) ao 950 (mais escuro), com o 600 destacado. Uma seta liga o 600 à classe bg-blue-600, onde chaves separam o prefixo (bg), a cor (blue) e o tom (600), e a legenda diz que o prefixo indica onde a cor vai: text, bg ou border.*

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.

*Figura: A linha \<ul class="grid gap-4 sm:grid-cols-2 md:grid-cols-3"> com as três classes sublinhadas e, embaixo, o que cada uma faz com os cards Bicicleta, Patinete e Capacete: grid vale para todas as telas e deixa 1 coluna, sm:grid-cols-2 passa para 2 colunas a partir de 640px e md:grid-cols-3 coloca os três lado a lado a partir de 768px.*

```html
<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`:

```css title="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:

```css
@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);
}
```

```html
<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.

## Referências

- [Installing Tailwind CSS with Vite - Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite)
- [Theme variables - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/theme)
- [:focus-visible CSS pseudo-class - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible)

Quer aprender mais? Conheça o curso [Tailwind CSS](https://www.origamid.com/curso/tailwind-css/).