Instalação via NPM

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