Como criar um projeto com Vite, React, TypeScript e Tailwind v4 🚀

Com o lançamento do TailwindCSS v4, a configuração de um projeto com Vite mudou. Agora não é mais necessário instalar o PostCSS e o Autoprefixer. Em vez disso, o TailwindCSS v4 inclui um plugin para Vite, que simplifica o processo de configuração, oferecendo melhor desempenho e uma experiência aprimorada para desenvolvedores.

Neste guia, vamos percorrer as etapas para criar um projeto usando Vite, React e TypeScript e integrar o TailwindCSS v4. Vamos começar! 🚀

Configurações do Projeto

Passo 1: Criar um Novo Projeto Vite

Primeiro, vamos criar um novo projeto Vite com React e TypeScript. Abra o terminal e execute o seguinte comando:

npm create vite@latest . -- --template react-ts

Obs: Esse comando cria o projeto no diretório atual. Se quiser criar o projeto em uma pasta diferente, basta adicionar o nome da pasta (neste exemplo, o nome da pasta é "meu-projeto"):

npm create vite@latest meu-projeto -- --template react-ts

Após rodar o comando, entre no diretório do projeto (se aplicável):

cd meu-projeto

Passo 2: Instalar TailwindCSS e o Plugin do Vite:

Para instalar o TailwindCSS e o plugin necessário para o Vite, execute:

npm install tailwindcss @tailwindcss/vite

Passo 3: Configurar TailwindCSS no vite.config.ts

Agora, vamos configurar o TailwindCSS no seu projeto Vite. Abra o arquivo vite.config.ts e adicione o plugin do Tailwind:

Step 4: Adicionar TailwindCSS ao Seu Arquivo CSS

Em seguida, abra o arquivo src/index.css e importe o TailwindCSS:

Obs: No TailwindCSS v4, a importação é feita usando um @import CSS normal, ao invés das diretivas @tailwind base, @tailwind components, e @tailwind utilities, utilizadas na v3.

Passo 5: Remover Arquivos Desnecessários

Depois de configurar o Tailwind, você pode remover com segurança o arquivo App.css do seu projeto, pois ele não será mais necessário.

Passo 6: Usar TailwindCSS em Seus Componentes

Agora que o TailwindCSS está configurado, você pode começar a usar suas classes utilitárias nos seus componentes. Para testar se está funcionando, modifique o arquivo App.tsx da seguinte forma:

Passo 7: Rodar o Seu Projeto

Por fim, inicie o servidor de desenvolvimento para ver seu projeto em ação:

npm run dev

Como você pode ver na captura de tela do navegador mostrada abaixo, tudo funcionou perfeitamente:

Recomendação: Tailwind IntelliSense para VS Code

Para melhorar sua experiência de desenvolvimento, recomendo fortemente a instalação da extensão Tailwind IntelliSense no VS Code. Ela oferece recursos avançados como:

Autocompletar classes do Tailwind.

Realce de sintaxe.

Linting e detecção de erros para TailwindCSS.

Conclusão

Parabéns! 🎉 Você configurou com sucesso um projeto Vite com React, TypeScript e TailwindCSS v4. Com o novo plugin dedicado ao Vite, o processo agora é mais rápido e simples do que nunca.

Se este guia foi útil para você, compartilhe com outros desenvolvedores ou deixe um comentário com sua opinião.

🚀 Bom desenvolvimento! 🚀