Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

--- tailwind [2026/07/27 20:31] – walter
+++ tailwind [2026/07/27 21:03] (versione attuale) – [FASE 3: CREAZIONE DEI FILE DI PROGETTO] walter
@@ Linea 1: / Linea 1: @@
 ===== GUIDA COMPLETA: INSTALLAZIONE DI TAILWIND CSS (v4) SU WINDOWS 11 =====
-====  FASE 1: PREPARAZIONE DEL SISTEMA (Solo la prima volta) ====
+==== FASE 1: PREPARAZIONE DEL SISTEMA (Solo la prima volta) ====
-  -
+  - Apri il browser e vai sul sito ufficiale di Node.js (nodejs.org).
- <font 10pt/inherit;;inherit;;inherit>Apri il browser e vai sul sito ufficiale di Node.js (nodejs.org).</font>   -
+  - Scarica la versione "LTS" (consigliata per la stabilità).
- <font 10pt/inherit;;inherit;;inherit>Scarica la versione "LTS" (consigliata per la stabilità).</font>   -
+  - Apri il file .msi scaricato e premi sempre "Next" per completare l'installazione.
- <font 10pt/inherit;;inherit;;inherit>Apri il file .msi scaricato e premi sempre "Next" per completare l'installazione.</font>   -
+  - Riavvia il computer per confermare le modifiche di sistema.
- <font 10pt/inherit;;inherit;;inherit>Riavvia il computer per confermare le modifiche di sistema.</font>
-====  FASE 2: CREAZIONE DEL PROGETTO E CONFIGURAZIONE ====
-  -
- <font 10pt/inherit;;inherit;;inherit>Premi il tasto Windows sulla tastiera, digita "Terminale" e premi Invio.</font>   -
+==== FASE 2: CREAZIONE DEL PROGETTO E CONFIGURAZIONE ====
- <font 10pt/inherit;;inherit;;inherit>Crea una nuova cartella digitando:</font>  \\
- <font 10pt/inherit;;inherit;;inherit>mkdir mio-progetto-tailwind</font>   -
+  * Premi il tasto Windows sulla tastiera, digita "Terminale" e premi Invio.
- <font 10pt/inherit;;inherit;;inherit>Entra nella cartella appena creata:</font>  \\
+  * Crea una nuova cartella digitando:
-    cd mio-progetto-tailwind
-  -
+<code>
- <font 10pt/inherit;;inherit;;inherit>Inizializza il gestore dei pacchetti \\
+mkdir mio-progetto-tailwind
-Node:</font> npm init <font 10pt/inherit;;inherit;;inherit>-y</font>   -
- <font 10pt/inherit;;inherit;;inherit>Installa Tailwind CSS e lo strumento Vite:</font>  \\
+</code>
- <font 10pt/inherit;;inherit;;inherit>npm install vite @tailwindcss/vite tailwindcss</font>
+  * Entra nella cartella appena creata:
- <font 10pt/inherit;;#0070c0;;inherit>FASE 3: CREAZIONE DEI FILE DI PROGETTO</font>
- <font 10pt/inherit;;inherit;;inherit>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:</font>
+<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 ====
+\\
+. Nel Terminale di Windows, assicurati di essere dentro la cartella del progetto e lancia il comando:
+<code>
+npx vite
+</code>
+. Copia l'indirizzo locale che compare (es. http://localhost:5173) e incollalo nel tuo browser.\\
+. 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!