---
# System prepended metadata

title: Vite com TailwindCSS

---

# 👩‍🏫 Instalação do React com Vite + SWC + Tailwind CSS (JavaScript)

Este é um passo a passo **completo e simplificado** para configurar um projeto moderno com:

* ✅ **React** (para criar interfaces)
* ⚡ **Vite** (para correr o projeto rapidamente)
* 🎨 **Tailwind CSS** (para estilizar com classes)

---

## 📦 PASSO 1 — Criar o projeto com Vite + React + SWC

No terminal do vscode, **após teres criado o repositório**, executa:

```bash
npm create vite@latest . -- --template react-swc
```

O `(.)` significa que o projeto terá o `nome` da pasta em que o terminal está aberto

---

## 📥 PASSO 2 — Instalar as dependências do projeto

No terminal, executa:

```bash
npm install
```
##### Ignore files and continue
---
## 🧹 PASSO 3 — Eliminar alguns arquivos 
1. Apaga o ficheiro `app.css` que está em `src/assets/app.css`
2. Apaga a linha do import que fica em `src/app.jsx`
3. Dentro do index.css, apagua todas as linhas, `src/assets/index.css` 

---

## 🎨 PASSO 4 — Instalar o Tailwind CSS

No terminal, ainda dentro da pasta do projeto, executa:

```bash
npm install tailwindcss @tailwindcss/vite
```

---

## ⚙️ PASSO 5 — Configurar o Tailwind no Vite

### 1. Abre o `vite.config.js`

Substitui o conteúdo por:

```js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

```

---

### 2. Inclui o import do tailwind no css

No index.css, inclui este import na primeira linha

```
@import "tailwindcss";
```

---

### 3. Verifiqua o Main.jsx

Abre o `src/main.jsx` e adiciona esta linha no topo:

```js
import './index.css';
```

O `main.jsx` deve ficar assim:

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css'; // 👈 Aqui é onde o Tailwind entra

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

---

## ✅ PASSO 6 — Testar se o Tailwind está a funcionar

Abre o `src/App.jsx` e troca o conteúdo por:

```jsx
function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-purple-700">
      <h1 className="text-8xl font-extrabold text-white">
        BYTES<span className="text-teal-500">4</span>FUTURE
      </h1>
    </div>
  );
}

export default App;
```

---

## ▶️ PASSO 7 — Correr o projeto

No terminal, executa:

```bash
npm run dev
```

E depois, abre o browser em:

```
http://localhost:5173
```

Se vires a mensagem estilizada, **está tudo a funcionar!**

---

## 📁 Estrutura final do projeto

```
meu-app/
├── index.html
├── package.json
├── vite.config.js
├── node_modules/
└── src/
    ├── App.jsx
    ├── main.jsx
    └── index.css
```

---

## 🎓 Dica só para os alunos queridos 🌟

No **VS Code**, instala a extensão:

* **Tailwind CSS IntelliSense** — para sugestões de classes do Tailwind

---

## ✅ Conclusão

Agora tens um projeto completo com:

* React ⚛️
* Vite ⚡
* Tailwind CSS 🎨

