Corso su Tailwind CSS

Lezione 1 • Installazione e configurazione di Tailwind

Guida all'installazione tramite CLI, integrazione con PostCSS e utilizzo della CDN. Gli studenti realizzano un ambiente locale funzionante, pronto per tutte le esercitazioni successive.

Lezione 2 • Filosofia fondamentale di Tailwind CSS

Esplora i vincoli progettuali, le impostazioni predefinite opinabili e il sistema di progettazione basato su vincoli di Tailwind. Collega la filosofia ai guadagni pratici di produttività che gli studenti sperimenteranno.

Lezione 3 • Cos'è il CSS utility-first

Definisce lo stile utility-first e lo contrappone ai framework basati su componenti. Stabilisce la base concettuale per ogni decisione relativa a Tailwind presa durante il corso.

Lezione 4 • Il file di configurazione di Tailwind

Introduce la struttura di tailwind.config.js, i percorsi dei contenuti e le chiavi del tema. Prepara gli studenti a personalizzare Tailwind senza comprometterne le impostazioni predefinite.

Lezione 1 • Utility di larghezza, altezza e dimensionamento

Esplora le classi di dimensionamento fisse, frazionarie, relative al viewport e basate sul contenuto. Gli studenti dimensionano correttamente contenitori e immagini in diversi contesti di layout.

Lezione 2 • Utility di visualizzazione e visibilità

Tratta le classi block, inline, flex, grid, hidden e di visibilità. Gli studenti controllano la resa degli elementi e le tecniche di occultamento sicure per l'accessibilità.

Lezione 3 • Utility di margine e padding

Insegna le classi di margine e padding direzionali, incluse le varianti abbreviate e per asse. Gli studenti applicano la spaziatura a elementi reali dell'interfaccia utente con precisione.

Lezione 4 • Comprendere la scala di spaziatura

Tratta la scala di spaziatura predefinita basata su rem di Tailwind e come i token numerici corrispondono ai valori in pixel. Fornisce il modello mentale necessario per decisioni coerenti su margine e padding.

Lezione 1 • Fondamenti della tavolozza dei colori di Tailwind

Introduce la struttura predefinita della tavolozza, la numerazione delle tonalità e i ruoli semantici dei colori. Gli studenti selezionano coppie di colori accessibili utilizzando la scala integrata di Tailwind.

Lezione 2 • Dimensione del carattere e interlinea

Associa la scala delle dimensioni del testo di Tailwind ai ruoli tipografici e spiega le interlinee predefinite abbinate. Gli studenti stabiliscono una chiara gerarchia visiva in qualsiasi interfaccia utente.

Lezione 3 • Personalizzazione ed estensione dei colori

Dimostra come aggiungere colori del marchio, variabili CSS e alias semantici nella configurazione. Gli studenti mantengono un sistema di colori scalabile in progetti di grandi dimensioni.

Lezione 4 • Spaziatura delle lettere e allineamento del testo

Insegna le utility di tracking, text-align e text-transform per un controllo tipografico accurato. Gli studenti rifiniscono titoli e corpo del testo secondo standard professionali.

Lezione 1 • Costruzione di componenti flex reali

Applica tutte le utility flex per costruire una barra di navigazione, un oggetto media e un layout del footer. Gli studenti consolidano le conoscenze su flex attraverso la costruzione pratica di componenti.

Lezione 2 • Flex Grow, Shrink e Basis

Spiega le utility flex-grow, flex-shrink e flex-basis e la loro interazione. Gli studenti costruiscono colonne fluide che si ridimensionano in modo prevedibile con diversi carichi di contenuto.

Lezione 3 • Utility di ordine e auto-allineamento

Insegna le classi di ordine e le sovrascritture di allineamento per elemento per disposizioni flex complesse. Gli studenti riordinano gli elementi visivi senza modificare la struttura del DOM.

Lezione 4 • Allineamento e giustificazione

Tratta le utility justify-content, align-items, align-self e align-content. Gli studenti centrano, distribuiscono e allungano gli elementi con precisione in qualsiasi layout flex.

Lezione 1 • Allineamento all'interno della Grid

Applica justify-items, align-items, justify-self e align-self nel contesto della grid. Gli studenti posizionano il contenuto delle celle indipendentemente dal dimensionamento delle tracce.

Lezione 2 • Configurazione del contenitore Grid

Attiva il contesto grid e definisce i template di colonna e riga utilizzando le classi di Tailwind. Gli studenti comprendono come le definizioni dei template controllano tutto il posizionamento degli elementi figli.

Lezione 3 • Costruzione di layout Grid reali

Costruisce un guscio di dashboard, una galleria di immagini e un layout di pagina editoriale utilizzando le utility grid. Gli studenti applicano la conoscenza della grid a strutture di pagina di qualità professionale.

Lezione 4 • Estensione su colonne e righe

Tratta le utility col-span, row-span e full-span per posizionare elementi su più tracce. Gli studenti creano layout asimmetrici che rompono lo schema uniforme della grid.

Lezione 1 • Cambio di layout responsivo

Passa da layout flex a grid a diversi breakpoint per una struttura adattiva. Gli studenti costruiscono componenti che si ristrutturano senza JavaScript.

Lezione 2 • Prefissi dei breakpoint di Tailwind

Tratta i prefissi sm, md, lg, xl e 2xl e le loro soglie predefinite in pixel. Gli studenti applicano con sicurezza i prefissi dei breakpoint a qualsiasi classe utility.

Lezione 3 • Principi del design mobile-first

Stabilisce il pensiero mobile-first e spiega perché i breakpoint di Tailwind sono min-width. Gli studenti riformulano le decisioni progettuali partendo dal viewport più piccolo.

Lezione 4 • Breakpoint personalizzati e configurazione degli schermi

Aggiunge breakpoint specifici del progetto e sovrascrive le impostazioni predefinite nella chiave di configurazione screens. Gli studenti adattano il sistema responsivo di Tailwind a qualsiasi specifica di design.

Lezione 1 • Varianti Group e Peer

Insegna i pattern group-hover e peer-checked per stili attivati da elementi padre e fratelli. Gli studenti costruiscono menu a tendina e checkbox personalizzate senza JavaScript.

Lezione 2 • Varianti di stato dei moduli

Applica le varianti required, invalid, valid e checked per stilizzare gli stati di validazione dei moduli. Gli studenti forniscono un chiaro feedback visivo per l'input dell'utente senza CSS personalizzato.

Lezione 3 • Utility di transizione e animazione

Aggiunge transizioni fluide e animazioni keyframe utilizzando le classi utility integrate di Tailwind. Gli studenti migliorano l'interattività con movimento performante e ottimizzato per la GPU.

Lezione 4 • Stati active, visited e disabled

Tratta le varianti active, visited, disabled e placeholder per uno stile completo di moduli e link. Gli studenti gestiscono tutti gli stati interattivi in un unico flusso di lavoro con classi utility.

Lezione 1 • Valori arbitrari e variabili CSS

Utilizza la notazione con parentesi quadre per valori unici e integra le proprietà personalizzate CSS nelle utility. Gli studenti escono dalla scala predefinita quando le specifiche di design richiedono precisione.

Lezione 2 • Prestazioni e ottimizzazione del bundle

Controlla la dimensione dell'output CSS, configura con precisione i percorsi dei contenuti e applica pattern di safelist. Gli studenti distribuiscono il foglio di stile più piccolo possibile senza sacrificare l'uso di classi dinamiche.

Lezione 3 • Implementazione della modalità scura

Configura la modalità scura basata su classe e su media e applica le varianti dark in tutta un'interfaccia utente. Gli studenti realizzano temi chiari e scuri completi da un unico foglio di stile.

Lezione 4 • Scrittura di plugin Tailwind personalizzati

Costruisce plugin di utility, componenti e varianti personalizzati utilizzando l'API dei plugin di Tailwind. Gli studenti estendono le capacità di Tailwind per soddisfare i requisiti unici di qualsiasi progetto.