📦 Requisitos
Ambiente com suporte a Node.js e npm (como o StackBlitz ou sua máquina local)
Um editor de código (VS Code, StackBlitz, etc.)
1. Inicializar projeto
Se estiver começando do zero (localmente):
mkdir meu-projeto-tailwind
cd meu-projeto-tailwind
npm init -y
Isso cria o package.json e estrutura mínima.
/meu-projeto-tailwind
│
├── index.html
├── tailwind.css
├── styles.css
├── tailwind.config.js
└── package.json (criado automaticamente ao instalar Tailwind)
(No StackBlitz talvez já haja um ambiente inicial, então você pode pular esse passo se já existir package.json.)
Passo 2: Instalar Tailwind CSS e dependências
Execute:
npm install -D tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init -p
Explicações:
tailwindcss@3.4.17 força instalar essa versão (ou algo próximo)
postcss e autoprefixer são usados para processar CSS e adicionar prefixos necessários
npx tailwindcss init -p cria dois arquivos:
tailwind.config.js
postcss.config.js
Após isso, você terá:
/meu-projeto-tailwind
│
├── node_modules/
├── index.html
├── tailwind.css
├── styles.css
├── postcss.config.js
├── tailwind.config.js
└── package.json (criado automaticamente ao instalar Tailwind)
No tailwind.config.js, o conteúdo padrão será algo como:
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
No postcss.config.js, geralmente:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Passo 3: Configurar os caminhos de “content” (template paths)
O Tailwind precisa saber onde procurar suas classes (em arquivos HTML, JS, etc) para gerar CSS apenas para as classes usadas. Isso ajuda a tree-shake (remover classes não utilizadas) e reduzir o tamanho final do CSS.
No seu tailwind.config.js, edite a propriedade content. Por exemplo, para um projeto simples:
module.exports = {
content: [
"./*.html",
"./src/**/*.{html,js}",
],
theme: {
extend: {},
},
plugins: [],
}
Se seus arquivos HTML, JS, componentes estiverem em outras pastas, inclua seus padrões.
Esse passo é fundamental para que o Tailwind “veja” as classes que você usa e inclua os estilos gerados.
Crie um arquivo CSS (por exemplo src/tailwind.css ou src/css/tailwind.css) com o seguinte conteúdo:
@tailwind base;
@tailwind components;
@tailwind utilities;
Esse arquivo será o ponto de entrada do Tailwind para gerar o CSS final.
Passo 5: Compilar o CSS
Agora você deve “processar” o tailwind.css junto com as configurações para gerar um CSS final (ex: dist/output.css). Há várias formas de fazer isso:
Usando Tailwind CLI
Esse é o método mais simples:
npx tailwindcss -i ./src/tailwind.css -o ./dist/output.css --watch
Explicação:
-i: arquivo de entrada (input)
-o: arquivo de saída (output)
--watch: fica observando alterações e recompila automaticamente
Depois disso, o arquivo dist/output.css será gerado e atualizado conforme você altera seus arquivos HTML ou CSS.
Esse método é também o indicado na documentação oficial.
Usando PostCSS / bundlers (webpack, Vite, etc)
Se você tiver um pipeline mais avançado:
Seu bundler (webpack, Vite, Rollup...) já executa PostCSS como parte da cadeia de build.
No postcss.config.js, você já incluiu tailwindcss e autoprefixer.
Você importa ou referencia no build esse input.css (ou outro arquivo) para ser processado.
Por exemplo, no Vite, você coloca:
import { defineConfig } from "vite"
export default defineConfig({
css: {
postcss: true
}
})
E no seu código (por exemplo main.js):
import "./tailwind.css"
E o bundler cuidará de compilar com PostCSS e gerar CSS final.
A documentação do Tailwind tem guias específicos para frameworks, como Vite.
Passo 6: Incluir CSS compilado no HTML
No seu arquivo HTML (ex: index.html), no <head>, incluia:
<link rel="stylesheet" href="./dist/output.css">
Ou o caminho correto para seu CSS de saída.
Exemplo mínimo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="dist/output.css" rel="stylesheet" />
<title>Projeto Tailwind</title>
</head>
<body>
<h1 class="text-3xl font-bold underline">Olá, Tailwind!</h1>
</body>
</html>
Se o CSS compilado estiver sendo servido por outra rota ou servidor, ajuste a URL de acordo.
Passo 7: Usar classes utilitárias no HTML
Agora é a parte divertida: você já pode usar as classes do Tailwind no seu HTML.
Alguns exemplos:
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
Clicar
</button>
<div class="max-w-md mx-auto mt-10">
<p class="text-gray-700 leading-relaxed">
Exemplo com Tailwind CSS.
</p>
</div>
Você pode combinar classes utilitárias para layout, cores, espaçamento, tipografia, responsividade etc.
Passo 8: Customizações e refinamentos (opcional)
Depois que tudo estiver funcionando, você pode:
Estender tema no tailwind.config.js (cores, fontes, espaçamentos, etc)
Usar @apply para criar classes personalizadas
Usar @layer components ou @layer utilities
Instalar plugins do Tailwind (por exemplo tipografia, forms)
Ativar modo “dark”, variantes e outras configurações
Certificar-se de que o “purge” / remoção de CSS não usado esteja funcionando bem (configuração content)
Tailwind CSS é um framework utilitário para criação rápida de interfaces com classes pré-definidas. A versão 3.4.17 inclui recursos modernos como JIT (Just-In-Time), dark mode, variantes estendidas, e mais.
📚 Referências
