A instalação via NPM é a forma recomendada para utilizar o Tailwind CSS em projetos reais. Essa abordagem permite personalizar totalmente o framework, otimizar o CSS final com purge e integrar facilmente com ferramentas como Webpack, Vite ou frameworks como Next.js e Laravel.
Pré-requisitos
Antes de começar, é necessário ter o Node.js instalado em sua máquina. Você pode verificar com o comando:
node -v
Se ainda não tiver o Node.js, baixe em: https://nodejs.org
Passo 1: Inicie seu projeto
Crie uma nova pasta e inicialize um projeto Node:
mkdir meu-projeto-tailwind
cd meu-projeto-tailwind
npm init -y
Passo 2: Instale o Tailwind CSS
Use o NPM para instalar o Tailwind e suas dependências:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Esse comando cria dois arquivos:
-
tailwind.config.js -
postcss.config.js
Passo 3: Configure os arquivos CSS
Crie um diretório src e dentro dele um arquivo CSS com as diretivas do Tailwind:
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Passo 4: Compile o CSS
Use o comando abaixo para compilar o CSS para produção:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Esse comando cria o arquivo dist/output.css, que será incluído no seu HTML.
Passo 5: Inclua no HTML
Agora, conecte o CSS gerado ao seu HTML:
<link href="/dist/output.css" rel="stylesheet">
Exemplo de estrutura mínima:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Projeto Tailwind</title>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-center p-10">
<h1 class="text-3xl font-bold text-blue-600">Tailwind instalado com sucesso!</h1>
</body>
</html>
Produção com otimização
Para projetos em produção, inclua os caminhos dos seus arquivos HTML, JS e templates no tailwind.config.js, para ativar o purge e reduzir o tamanho do CSS final:
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
}
Benefícios da instalação via NPM
-
Total personalização com
tailwind.config.js -
Geração de CSS otimizado com purge
-
Integração com build tools e frameworks modernos
-
Melhor performance e controle em ambientes de produção