Web & Frontend
Corso Tailwind Completo
Corso da zero per imparare ad utilizzare il framework Tailwind CSS. Vediamo come usarlo, ecosistema ed esercizio finale.
- 13 ore di video
- 101 lezioni
- Intermedio
- Certificato finale

Caricando il video accetti che YouTube (Google Ireland Ltd.) imposti cookie e riceva il tuo indirizzo IP e i dati di navigazione. Informativa di Google · La nostra privacy policy
Descrizione del corso
Tailwind CSS sta rivoluzionando il modo in cui sviluppiamo interfacce web, offrendo un approccio utility-first che accelera drasticamente il processo di sviluppo. Questo corso completo ti guiderà attraverso la filosofia e le pratiche che rendono Tailwind così potente ed efficiente nel moderno sviluppo frontend.
A differenza dei framework tradizionali come Bootstrap, Tailwind offre un livello di personalizzazione e flessibilità senza precedenti. Esploreremo in profondità concetti fondamentali come il sistema di configurazione, le strategie di responsive design e l'utilizzo di funzionalità avanzate come gruppi, stati e layer. Queste competenze ti permetteranno di creare interfacce completamente personalizzate mantenendo la velocità di sviluppo che Tailwind promette.
Il corso va oltre le basi, approfondendo l'ecosistema completo di Tailwind. Imparerai a sfruttare plugin ufficiali e di terze parti, integrare Tailwind con i principali framework JavaScript e ottimizzare il tuo bundle per la produzione. Particolare attenzione viene data alle best practices per mantenere il codice pulito e manutenibile anche in progetti di grandi dimensioni.
Il progetto finale del corso ti sfiderà a riprodurre l'interfaccia di una chat moderna, mettendo in pratica tutte le tecniche apprese. Questo progetto reale ti permetterà di affrontare sfide comuni come la gestione del layout, l'animazione degli elementi e la creazione di componenti riutilizzabili con Tailwind.
Alla fine del corso, sarai in grado di:
- Creare interfacce responsive e performanti usando l'approccio utility-first
- Personalizzare Tailwind per adattarlo alle esigenze del tuo brand
- Implementare pattern di design moderni e accessibili
- Ottimizzare il tuo workflow con l'ecosistema Tailwind
Programma
18 moduli · 101 lezioni01Intro5 lezioni
- Dove siamo arrivati
- Aggiornamento Tailwind 4
- Cos'è Tailwind CSS
- Differenza con Bootstrap
- Ambiente Sviluppo
02Concetti Fondamentali11 lezioni
- Installare Tailwind CDN
- Installare con CLI
- Installazione 4.0
- Utility First
- Handle degli eventi
- Responsive Design
- Dark Mode
- Riutilizzo degli stili
- Aggiungere stili custom
- Funzioni e direttive
- Preflight
03Layout12 lezioni
- Aspect Ratio
- Container
- Columns
- Box Sizing
- Display
- Floats e Clear
- Object Fit e Object Position
- Overflow
- Position
- Visibility
- Z-Index
- Esercizio Sezione
04Dimensioni e Spazi6 lezioni
- Width e Height
- Min e Max
- Size
- Padding e Margin
- Space Between
- Esercizio Sezione
05Flexbox e Grid6 lezioni
- Tutto Flex
- Tutto Grid
- Justify Content, Items, Self
- Align Content, Items, Self
- Place Content, Items, Self
- Esercizio Sezione
06Tipografia7 lezioni
- Font Family
- Font Size, Smoothing, Style, Weight, Variant Numeric
- Letter Spacing, Line Clamp e Height
- Liste
- Classi Text
- Altre Classi
- Esercizio Sezione
07Background4 lezioni
- Classi Background
- Background Clip, Origin
- Gradienti di Sfondo
- Esercizio Sezione
08Bordi4 lezioni
- Bordi
- Divide
- Outline e Ring
- Esercizio Sezione
09Effetti e Filtri5 lezioni
- Box Shadow e Opacity
- Mix Blend Mode
- Background Blend Mode
- Filtri
- Filtri Backdrop
10Tabelle1 lezioni
- Classi Tabelle
11Animazioni4 lezioni
- Trasformazioni
- Transizioni
- Animazioni
- Esercizio Sezioni
12Interattività7 lezioni
- Accent Color
- Appearance
- Cursor
- Caret Color
- Resize
- Scroll Behavior e Snap
- Altre Classi
13SVG1 lezioni
- Classi per SVG
14Configurazione8 lezioni
- Config File
- Content
- Theme
- Screens
- Colors
- Spacing
- Plugins
- Presets
15Plugin4 lezioni
- Plugin 4.0
- Typography
- Form
- Container Query
16Ecosistema5 lezioni
- Tailwind UI
- Heroicons, Headless UI, Heropatterns
- Librerie Componenti
- Tailscan
- Tools Online
17Avanzato7 lezioni
- Group
- Peer
- Children
- Has
- Attributi
- Pseudo Classi e Pseudo Elementi
- Layers
18Fine Corso4 lezioni
- Esercizo Finale Parte 1
- Esercizo Finale Parte 2
- Esercizo Finale Parte 3
- Prossimi Passi