Integração do Tailwind CSS com React

Criando um projeto React

Se ainda não tem um projeto, crie com o Vite, que é rápido e ideal para projetos modernos:

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

Ou com Create React App:

npx create-react-app my-app
cd my-app

Instalando o Tailwind CSS

Siga os passos oficiais para instalar o Tailwind no projeto:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configurando os arquivos

No arquivo tailwind.config.js, defina quais arquivos devem ser escaneados:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Agora, crie ou edite o arquivo src/index.css com o conteúdo base do Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

E importe esse CSS no seu main.jsx ou index.js:

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

Após a configuração, você pode aplicar as classes diretamente no JSX:

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 + Tailwind

1. Componentes desacoplados e reutilizáveis

Evite acoplamento entre lógica e visual. Componentize tudo que puder:

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 com props

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` ou `classnames` para lógica condicional

npm install clsx

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. Organize os estilos com diretivas `@apply` se necessário

Crie um CSS modular para elementos mais repetitivos:

/* styles/components.css */
.btn-primary {
  @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
}

Importe no index.css e use no JSX:

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

Integração com bibliotecas externas

Tailwind funciona bem com bibliotecas de UI como:

Headless UI – para componentes acessíveis e totalmente estilizados via Tailwind
Radix UI – se precisar de base estilizada, mas com total controle
Framer Motion – animações com Tailwind + React
React Hook Form – para formulários com validações customizadas

Desenvolvimento com auto-complete

Para facilitar o uso de Tailwind no React, instale a extensão do Tailwind CSS no VSCode. Ela oferece sugestões de classe em tempo real, validação e documentação inline.

Build otimizado

No modo de produção, Tailwind remove automaticamente as classes não utilizadas (purge), garantindo que o bundle final seja enxuto — mesmo que o seu HTML pareça verboso durante o desenvolvimento.

A integração entre React e Tailwind CSS é extremamente eficiente. Você obtém produtividade, escalabilidade e controle visual completo — com componentes reutilizáveis e sem precisar sair do JSX.