EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Instalação e Configuração de Projeto com Tailwind CSS - Guia Completo

Início Rápido via CDN

A maneira mais rápida de experimentar o Tailwind CSS é através de um link CDN — sem necessidade de ferramentas de build, basta adicioná-lo diretamente ao seu arquivo HTML.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Início Rápido via CDN</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center">
  <div class="bg-white p-8 rounded-lg shadow-md">
    <h1 class="text-3xl font-bold text-blue-600 mb-4">Olá Tailwind!</h1>
    <p class="text-gray-600">Experimente o Tailwind CSS rapidamente via CDN</p>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever classes CSS personalizadas e vincular uma folha de estilos, enquanto o método CDN do Tailwind permite começar a usar todas as classes utilitárias com apenas uma única tag <script>.

⚠️ Nota: A abordagem CDN é adequada apenas para aprendizado e prototipagem. Para produção, utilize um método de instalação adequado.

Configuração Padrão com Vite + PostCSS

Para projetos de produção, a instalação padrão com Vite + PostCSS é recomendada para o melhor desempenho de build e experiência de desenvolvimento.

Exemplo

BASH 
npm create vite@latest my-tailwind-app -- --template vanilla
cd my-tailwind-app

npm install tailwindcss @tailwindcss/vite

npm run dev
▶ Experimente

Configure o plugin do Tailwind em vite.config.js:

JAVASCRIPT 
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

CSS Tradicional vs Tailwind Projetos tradicionais exigem a configuração manual do PostCSS, Autoprefixer e outros plugins, enquanto o Tailwind v4 trata toda a configuração automaticamente através do plugin do Vite.

Uso de @import "tailwindcss"

O Tailwind CSS v4 utiliza a sintaxe @import em vez das diretivas mais antigas @tailwind, alinhando-se melhor com as especificações padrão do CSS.

Exemplo

Crie a folha de estilos principal src/style.css:

CSS 
@import "tailwindcss";
▶ Experimente

Importe-a no seu HTML:

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Uso de Import</title>
  <link rel="stylesheet" href="/src/style.css">
</head>
<body class="bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen">
  <div class="container mx-auto p-8">
    <h1 class="text-4xl font-bold text-white text-center">
      Tailwind CSS v4
    </h1>
  </div>
</body>
</html>

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever muitas regras de estilo em um arquivo CSS, enquanto o Tailwind v4 importa todo o framework utilitário com apenas uma linha: @import "tailwindcss".

Visão Geral da Configuração tailwind.config

O Tailwind CSS v4 suporta configuração direta através de arquivos CSS, eliminando a necessidade de um arquivo de configuração JavaScript separado.

Exemplo

Use a diretiva @theme no seu arquivo CSS para personalizar o tema:

CSS 
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-family-heading: "Noto Sans SC", sans-serif;
}
▶ Experimente

Usando o tema personalizado:

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Configuração de Tema Personalizado</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#10b981',
          }
        }
      }
    }
  </script>
</head>
<body class="min-h-screen p-8">
  <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-700">
    Primária
  </button>
  <button class="bg-secondary text-white px-6 py-3 rounded-lg ml-4 hover:bg-green-700">
    Secundária
  </button>
</body>
</html>

CSS Tradicional vs Tailwind A abordagem tradicional exige definir variáveis CSS e referenciá-las ao longo do código, enquanto a configuração de tema do Tailwind gera diretamente as classes utilitárias correspondentes, tornando-as muito mais convenientes de usar.

Recomendações de Plugins para VS Code

Instalar plugins no VS Code pode aumentar significativamente sua produtividade no desenvolvimento com Tailwind CSS.

Plugins Essenciais

  1. Tailwind CSS IntelliSense - Fornece autocompletar, destaque de sintaxe e visualização ao passar o mouse
  2. Prettier - Formatação automática e ordenação de nomes de classes

Exemplo

Após instalar os plugins, sugestões de autocompletar aparecem enquanto você digita os nomes das classes:

HTML 
<div class="bg-blue-500">

<p class="text-lg font-semibold">

<div class="shadow-lg rounded-xl p-6">
▶ Experimente
💡 Dica: Adicione as seguintes configurações ao seu VS Code para uma melhor experiência de desenvolvimento:

JSON 
{
  "editor.quickSuggestions": {
    "strings": true
  },
  "css.validate": false
}

Seu Primeiro Projeto com Tailwind

Vamos criar um projeto completo com Tailwind para reforçar o que aprendemos.

Exemplo

Estrutura completa do projeto e código:

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Primeiro Projeto com Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <nav class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">Meu Site</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">Início</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">Sobre</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contato</a>
      </div>
    </div>
  </nav>

  <main class="max-w-7xl mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">Título do Card</h3>
          <p class="text-gray-600 text-sm">Um componente de card construído com Tailwind CSS.</p>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-green-400 to-teal-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">Título do Card</h3>
          <p class="text-gray-600 text-sm">Layout responsivo que se adapta a diferentes tamanhos de tela.</p>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-orange-400 to-red-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">Título do Card</h3>
          <p class="text-gray-600 text-sm">Nenhum CSS personalizado necessário.</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige escrever arquivos CSS separados para barras de navegação, cards, grades e outros componentes, enquanto o Tailwind realiza todo o estilo diretamente no HTML usando classes utilitárias, melhorando drasticamente a eficiência do desenvolvimento.

❓ Perguntas Frequentes

P: Qual é a diferença entre a abordagem CDN e uma instalação adequada? R: A abordagem CDN carrega a biblioteca completa do Tailwind (cerca de 300KB) com todas as classes utilitárias, adequada para desenvolvimento e prototipagem. Uma instalação adequada gera CSS sob demanda através de ferramentas de build, produzindo tipicamente apenas 10-20KB para produção, oferecendo melhor desempenho.

P: Como a configuração do Tailwind CSS v4 difere da v3? R: A v4 utiliza a diretiva CSS nativa @theme para configuração dentro das folhas de estilos, enquanto a v3 utiliza um arquivo separado tailwind.config.js. A v4 está mais alinhada com os padrões CSS e possui configuração mais simples.

P: Por que meu VS Code não mostra o autocompletar do Tailwind? R: Certifique-se de que o plugin Tailwind CSS IntelliSense está instalado e que editor.quickSuggestions.strings está habilitado nas suas configurações. Se estiver usando a instalação via PostCSS, verifique também se o arquivo de configuração correto existe na raiz do seu projeto.

P: Posso usar o Tailwind e CSS personalizado juntos? R: Sim. O Tailwind é totalmente compatível com o CSS nativo, e você pode misturá-los conforme necessário. No entanto, é recomendado preferir as classes utilitárias do Tailwind para manter o estilo do seu código consistente.

📖 Resumo

📝 Exercícios

  1. ⭐ Use a abordagem CDN para criar uma página simples com um título, parágrafo e botão, aplicando pelo menos 3 classes utilitárias do Tailwind em cada elemento

  2. ⭐⭐ Instale o Tailwind CSS adequadamente com Vite, crie uma página com uma barra de navegação e área de conteúdo, e configure cores de tema personalizadas

  3. ⭐⭐⭐ Crie uma página de lista de cards totalmente responsiva com configuração de tema personalizada, efeitos de hover e diferentes quantidades de colunas em diferentes tamanhos de tela

100%