React e Tailwind CSS com Vite

Criar uma aplicação com React e Tailwind CSS oferece um ambiente de desenvolvimento ágil e altamente produtivo. Com a abordagem baseada em componentes do React e a arquitetura focada em CSS nativo do Tailwind, o processo de configuração foi simplificado, eliminando a necessidade de arquivos JavaScript complexos e integrando-se diretamente ao empacotador de módulos.

Criando um projeto React

A recomendação atual para iniciar projetos modernos, rápidos e leves é utilizar o Vite. O Create React App foi descontinuado e não é recomendado para novas aplicações.

Bash

npm create vite@latest my-app -- --template react
cd my-app
npm install

Instalando o Tailwind CSS

Para integrar o Tailwind, você deve instalar o pacote principal e o plugin oficial desenvolvido para o Vite:

Bash

npm install tailwindcss @tailwindcss/vite

Configurando o Vite

Abra o arquivo vite.config.js na raiz do seu projeto. Adicione o plugin do Tailwind diretamente na lista de plugins do Vite. Essa integração cuida de todo o processo de build e da varredura automática de classes no seu código JSX/TSX, tornando desnecessário o uso de arquivos como tailwind.config.js ou postcss.config.js:

JavaScript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

Configurando o arquivo de estilos

No seu arquivo de estilos global (geralmente src/index.css), substitua as diretivas antigas pela nova importação de linha única do framework:

CSS

@import "tailwindcss";

Certifique-se de que este arquivo está sendo importado no ponto de entrada da sua aplicação, como no src/main.jsx ou src/main.tsx:

JavaScript

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Usando Tailwind nos componentes React

Com a configuração concluída, as classes utilitárias já estão disponíveis para uso direto na propriedade className do JSX:

JavaScript

export default function Card() {
  return (
    <div className="bg-white shadow-md rounded-lg p-6 max-w-sm">
      <h2 className="text-xl font-bold mb-2">Título</h2>
      <p className="text-gray-600">Descrição do conteúdo do card.</p>
    </div>
  );
}

Boas práticas em projetos React

1. Componentes desacoplados e reutilizáveis

A melhor maneira de gerenciar a verbosidade das classes utilitárias é extrair elementos repetitivos para componentes React isolados:

JavaScript

export function Button({ children }) {
  return (
    <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
      {children}
    </button>
  );
}

2. Crie variantes controladas por propriedades (Props)

Como o motor do Tailwind analisa strings estáticas completos para compilar o CSS, mapeie as classes inteiras dentro de objetos em vez de quebrar ou interpolar nomes de classes:

JavaScript

export function Badge({ type = 'success', children }) {
  const colors = {
    success: 'bg-green-100 text-green-700',
    error: 'bg-red-100 text-red-700',
    warning: 'bg-yellow-100 text-yellow-700',
  };

  return (
    <span className={`px-2 py-1 rounded text-sm ${colors[type]}`}>
      {children}
    </span>
  );
}

3. Utilize clsx para lógica condicional complexa

Para componentes que alternam classes com base em estados ou interações, a biblioteca clsx (ou tailwindcss-merge) ajuda a manter a sintaxe limpa:

Bash

npm install clsx

JavaScript

import clsx from 'clsx';

export function Alert({ show }) {
  return (
    <div className={clsx(
      "transition-opacity duration-300",
      show ? "opacity-100" : "opacity-0"
    )}>
      Mensagem importante
    </div>
  );
}

4. Customização de componentes e tokens

Se precisar criar classes de componentes globais ou estender o tema (adicionar cores, espaçamentos, etc.), faça isso diretamente no src/index.css usando as diretivas @theme ou @utility:

CSS

@import "tailwindcss";

@theme {
  --color-brand: #1e60aa;
}

@utility btn-primary {
  background-color: var(--color-brand);
  color: var(--color-white);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
}

No JSX:

JavaScript

<button className="btn-primary">Salvar</button>

Integração com bibliotecas externas

O ecossistema React funciona de maneira integrada com soluções de interface modernas pensadas para o Tailwind:

• Radix Primitives / Headless UI: Excelentes para componentes de comportamento complexos (modais, dropdowns, abas) que vêm sem estilos, permitindo que você aplique suas próprias classes utilitárias.

• Shadcn/ui: Uma abordagem popular baseada em componentes copiados diretamente para o seu projeto, construídos com React e Tailwind.

• Framer Motion: Perfeito para orquestrar animações fluidas combinadas com as classes de transição do framework.

Ferramentas de desenvolvimento

Para obter a melhor experiência ao programar, instale a extensão Tailwind CSS IntelliSense no VS Code. Ela fornece preenchimento automático inteligente, linting e visualização das propriedades CSS nativas ao passar o mouse sobre as classes no JSX.

Build otimizado

O novo motor de compilação analisa estaticamente os seus arquivos .jsx e .tsx durante o comando npm run build. Ele gera uma folha de estilo final contendo exclusivamente as classes que foram encontradas no código do seu projeto, resultando em um bundle de CSS extremamente reduzido e performático para produção.