===== GUIDA COMPLETA: INSTALLAZIONE DI TAILWIND CSS (v4) SU WINDOWS 11 =====

==== FASE 1: PREPARAZIONE DEL SISTEMA (Solo la prima volta) ====

  - Apri il browser e vai sul sito ufficiale di Node.js (nodejs.org).
  - Scarica la versione "LTS" (consigliata per la stabilità).
  - Apri il file .msi scaricato e premi sempre "Next" per completare l'installazione.
  - Riavvia il computer per confermare le modifiche di sistema.


==== FASE 2: CREAZIONE DEL PROGETTO E CONFIGURAZIONE ====

  * Premi il tasto Windows sulla tastiera, digita "Terminale" e premi Invio.
  * Crea una nuova cartella digitando:

<code>
mkdir mio-progetto-tailwind

</code>
  * Entra nella cartella appena creata:

<code>
cd mio-progetto-tailwind

</code>
  * Inizializza il gestore dei pacchetti Node:

<code>
npm init -y

</code>
  * Installa Tailwind CSS e lo strumento Vite:

<code>
npm install vite @tailwindcss/vite tailwindcss

</code>

==== FASE 3: CREAZIONE DEI FILE DI PROGETTO ====

All'interno della cartella "mio-progetto-tailwind", crea questi tre file fondamentali usando il tuo editor di codice (es. VS Code) o il Blocco Note:

=== File 1: vite.config.js ===

Incolla il seguente codice per attivare il plugin di Tailwind:

<code>
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
   plugins: [tailwindcss()],
})

</code>

=== File 2: style.css ===

Inserisci solo questa riga in cima al file per importare le funzioni del framework:

<code>
@import "tailwindcss";

</code>

=== File 3: index.html ===

Crea la struttura base della tua pagina web e collega il file CSS:

<code>
<!DOCTYPE html>
<html lang="it">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Mio Progetto Tailwind</title>
      <link rel="stylesheet" href="./style.css">
</head>
<body class="bg-blue-50 flex items-center justify-center h-screen">
      <div class="bg-white p-8 rounded-2xl shadow-xl text-center">
           <h1 class="text-3xl font-extrabold text-blue-600 mb-2">Installazione Riuscita!</h1>
           <p class="text-gray-600">Tailwind CSS v4 e Vite sono pronti su Windows 11.</p>
      </div>
</body>
</html>

</code>


==== FASE 4: AVVIO DEL SERVER DI SVILUPPO ====

\\
1. Nel Terminale di Windows, assicurati di essere dentro la cartella del progetto e lancia il comando:

<code>
npx vite

</code>

2. Copia l'indirizzo locale che compare (es. http://localhost:5173) e incollalo nel tuo browser.\\
3. Lascia il terminale aperto: ogni volta che modificherai l'HTML, la pagina si aggiornerà da sola.

==== FASE 5: PUBBLICAZIONE DEL SITO WEB SU ALTERVISTA ====

Quando hai terminato lo sviluppo in locale, non devi caricare l'intera cartella del progetto. È necessario prima generare la versione definitiva del sito (ottimizzata e leggera) e poi trasferirla online.

=== 1. COMPILAZIONE DEL PROGETTO (BUILD) ===

  - Apri il Terminale di Windows nella cartella del tuo progetto.
  - Se il server di prova è ancora attivo, premi la combinazione di tasti [ CTRL + C ] per fermarlo.
  - Digita il seguente comando e premi Invio:

<code>
     npx vite build

</code>

Al termine del processo, Vite creerà automaticamente una nuova cartella chiamata "dist" all'interno del tuo progetto. Questa cartella contiene solo i file necessari per il web (HTML, CSS minimizzato e immagini).

=== 2. ACCESSO AD ALTERVISTA ===

  - Apri il browser e vai sul sito ufficiale di Altervista (it.altervista.org).
  - Clicca su "Login" in alto a destra e inserisci i tuoi dati di accesso (Username e Password).
  - Entra nel pannello di controllo principale (Bacheca).

=== 3. CARICAMENTO DEI FILE (DEPLOY) ===

  - Nel menu di Altervista, seleziona la voce "Gestione File" (o "Sito" → "Gestione File").
  - Assicurati di trovarti nella cartella principale del tuo spazio web (la cartella radice).
  - Sul tuo computer, apri la cartella "dist" appena generata.
  - Seleziona TUTTO il contenuto interno alla cartella "dist" (il file index.html e la cartella assets).
  - Trascina e rilascia questi file direttamente nella schermata del browser di Altervista, oppure clicca sul pulsante "Invia Files" per selezionarli.

=== ATTENZIONE / NOTA IMPORTANTE: ===

Il file "index.html" deve trovarsi nella cartella principale di Altervista e NON all'interno di una sottocartella chiamata "dist". Se visitando il tuo link (es. nomesito.altervista.org) vedi una pagina bianca o un errore, verifica di aver spostato i file fuori dalla cartella "dist" durante il caricamento.

===== Come usare VS Code fin dall'inizio =====

  - Apri la cartella: Avvia VS Code, clicca su File > Apri cartella… e seleziona la cartella del tuo progetto (mio-progetto-tailwind).
  - Usa il Terminale Integrato: Invece di usare il prompt dei comandi di Windows, premi la combinazione di tasti CTRL + ò (oppure vai in alto su Terminale > Nuovo Terminale). Si aprirà un terminale integrato in basso, già posizionato nella cartella corretta.
  - Lancia i comandi da lì: Digita npm install… o npx vite direttamente nel terminale di VS Code.
  - Scrivi il codice: Crea e modifica i file index.html, style.css e vite.config.js usando l'editor di testo di VS Code.

=== Un trucco fondamentale per Tailwind su VS Code ===

Per scrivere il codice alla massima velocità, devi assolutamente installare un'estensione gratuita ufficiale dentro VS Code:

  - Clicca sull'icona dei quadratini a sinistra in VS Code (Estensioni), oppure premi CTRL + SHIFT + X.
  - Cerca "Tailwind CSS IntelliSense" (quella ufficiale creata da Tailwind Labs).
  - Clicca su Installa.

Cosa fa questa estensione?

Mentre scrivi il codice HTML e digiti una classe (ad esempio bg-), ti mostrerà un menu a tendina con i suggerimenti automatici di tutti i colori e le opzioni disponibili, mostrandoti persino un quadratino con l'anteprima del colore. Questo ti eviterà di dover ricordare a memoria tutti i nomi delle classi.

Se vuoi aggiungere anche questa comoda scorciatoia alla tua guida in Word, ti preparo l'impaginazione al volo. Altrimenti, dimmi pure se hai già installato VS Code sul tuo computer!