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

• Premi il tasto Windows sulla tastiera, digita “Terminale” e premi Invio.
• Crea una nuova cartella digitando:

mkdir mio-progetto-tailwind

• Entra nella cartella appena creata:

cd mio-progetto-tailwind

• Inizializza il gestore dei pacchetti Node:

npm init -y

• Installa Tailwind CSS e lo strumento Vite:

npm install vite @tailwindcss/vite tailwindcss

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:

Incolla il seguente codice per attivare il plugin di Tailwind:

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

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

@import "tailwindcss";

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

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

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

npx vite

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.

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

     npx vite build

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).

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

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

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.