Com o lançamento do TailwindCSS v4, o processo de criação de um projeto com Vite se tornou ainda mais simples, eliminando a necessidade de configurar manualmente o PostCSS e o Autoprefixer. Em vez disso, o TailwindCSS v4 agora inclui um plugin para Vite, que simplifica o processo de configuração, proporcionando 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 acima, 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! 🚀