DEV Community: Geane Ramos

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

Geane Ramos — Wed, 26 Feb 2025 23:02:56 +0000

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! 🚀

How to setup your Vite project with React, TypeScript, and TailwindCSS v4 🚀

Geane Ramos — Wed, 26 Feb 2025 22:27:14 +0000

With the launch of TailwindCSS v4, setting up a project with Vite has changed. You no longer need to install PostCSS and Autoprefixer. Instead, TailwindCSS v4 comes with a dedicated Vite plugin, making the setup process simpler while offering better performance and an improved developer experience.

In this guide, let's walk through the steps to create a project using Vite, React, and TypeScript, and integrate TailwindCSS v4. Let’s get started! 🚀

Project Setup

Step 1: Create a New Vite Project

First, let’s create a new Vite project with React and TypeScript. Open your terminal and run the following command:

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

Note: This command creates the project in the current directory. If you want to create the project in a different folder, simply add the folder name (in this example, the folder name is "my-project"):

npm create vite@latest my-project -- --template react-ts

After running the command, navigate to your project directory (if applicable):

cd my-project

Step 2: Install TailwindCSS and the Vite Plugin

To install Tailwind CSS and the necessary plugin for Vite, run:

npm install tailwindcss @tailwindcss/vite

Step 3: Configure TailwindCSS in vite.config.ts

Now, let’s configure TailwindCSS in your Vite project. Open the vite.config.ts file and add the Tailwind plugin:

Step 4: Add TailwindCSS to Your CSS

Next, open the src/index.css file and add the TailwindCSS import:

Note: In v4 you import Tailwind using a regular CSS @importstatement, not using the @tailwind directives @tailwind base, @tailwind components, and @tailwind utilities you used in v3.

Step 5: Remove Unnecessary Files

After setting up Tailwind, you can safely remove the App.css file from your project as it is no longer needed.

Step 6: Use TailwindCSS in Your Components

Now that TailwindCSS is set up, you can start using its utility classes in your components. To check if it works, for example, modify your App.tsx file as follows:

Step 7: Run Your Project

Finally, start your development server to see your project in action:

npm run dev

As you can see in the browser screenshot below, it worked perfectly:

Recommendation: Tailwind IntelliSense for VS Code

To enhance your development experience, I highly recommend installing the Tailwind IntelliSense extension for VS Code. It provides advanced features like:

Autocomplete for Tailwind classes.

Syntax highlighting.

Linting for TailwindCSS.

Conclusion

Congratulations! 🎉 You’ve successfully set up a Vite project with React, TypeScript, and TailwindCSS v4. With the new dedicated Vite plugin, the process is now faster and simpler than ever. If you found this guide helpful, feel free to share it with your fellow developers or leave a comment below with your thoughts. Happy coding! 🚀