# 👩‍🏫 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:

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:

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:

npm install tailwindcss @tailwindcss/vite

---

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

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

Substitui o conteúdo por:

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:

import './index.css';

O `main.jsx` deve ficar assim:

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:

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:

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 🎨