Como configurar um projeto React + Tailwind CSS com Vite

No desenvolvimento moderno de front-end, a combinação de ferramentas eficientes é essencial para criar interfaces de usuário de alta qualidade. React, uma das bibliotecas JavaScript mais populares, continua a evoluir com novas ferramentas, como o Vite, que promete tempos de build rápidos.

O Tailwind CSS, um framework de utilitários CSS, também é um grande aliado, permitindo a criação de designs personalizados sem sair do HTML. Este artigo explora como configurar um projeto React com Vite e Tailwind CSS para garantir um excelente desempenho.

1. Criar o projeto

Se estiver usando NPM:

npm create vite@latest

Se estiver usando Yarn:

yarn create vite

No meu caso estou usando o PNPM

Esse comando criará nosso projeto com o nome tailwind-css-react, configurado para usar TypeScript.

Utilizando os comandos do terminal, podemos acessar o projeto para dar continuidade às configurações.

cd tailwind-css-react

2. Navegar para o projeto e instalar as dependências

No terminal digite os seguintes comandos:

pnpm install -D tailwindcss postcss autoprefixer

Esse comando irá instalar:

• O Tailwind css framework.
• PostCSS, uma ferramenta para transformar o CSS com plugins JS; o Tailwind usa o PostCSS para processar seu CSS.
• Autoprefixer, um plugin do PostCSS que formata e adiciona regras ao CSS.

3. Gerar os arquivos de configuração

Voltando ao terminal, vamos digitar esse comando:

npx tailwindcss init -p

Esse comando irá gerar os arquivos tailwind.config.jse postcss.config.js, com eles será possível interagir e customizar o projeto.

4. Configurar o sourse/templates path

Agora precisamos adicionar o caminho dos nossos templetes e arquivos no tailwind.config.js, a principio seu arquivo deve estar dessa forma:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Iremos adicionar ao content:

"./index.html", "./src/**/*.{js,ts,jsx,tsx}"

Nesse caso estamos adicionando arquivos que terão classes do tailwind, fazemos isso para garantir que o CSS gerado seja aplicado corretamente aos elementos correspondentes.

5. Adicionar as Tailwind directives no CSS

Estamos quase lá, Agora, precisamos adicionar o CSS base do Tailwind no nosso projeto. Para isso, em um dos arquivos CSS gerados no projeto (App.css ou index.css), adicione:

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

6. Usando o Tailwind

Pronto! Agora que temos tudo configurado podemos utilizar as classes do tailwind em nosso HTML como desejarmos.

import "./App.css";

function App() {
  return (
    <div className="flex justify-center items-center h-screen">
      <h1 className="text-blue-700 font-bold">Hello word</h1>
    </div>
  );
}

export default App;

Para rodar o projeto:

pnpm run dev