Luca Perullo

Curriculum / intermedio

Tailwind CSS: il modo moderno di vestire un sito

Utility classes, design tokens, dark mode. Niente più file CSS giganti, design coerente per default.

Tailwind nel 2026 è quello che era jQuery nel 2010: ovunque. In 8 lezioni costruirai la landing del SaaS "Pulse" — una vera app fitness — usando solo utility classes. Header sticky, hero con CTA, griglia features, pricing tiers, footer, dark mode, micro-animazioni. Alla fine avrai un sito pubblicabile e capirai perché chi usa Tailwind non torna più indietro.

Inizia adesso75 min · 8 lezioni

Setup + tipografia01

Tailwind via CDN, body con sfondo, prime utility classes per testo grande e centrato.

  1. 01Le prime utility: il body prende vita2 min
  2. 02Hero: il titolo che cattura2 min
  3. 03Il bottone CTA: il click che conta2 min
  4. 04Sezione features: 3 colonne con grid2 min

Layout flex e grid02

Hero con CTA, griglia features con auto-fit, breakpoints responsive (sm/md/lg).

  1. 05Card che si sollevano al passaggio del mouse2 min
  2. 06Pricing tiers: Free, Pro, Team2 min
  3. 07Header sticky con backdrop-blur2 min
  4. 08Dark mode istantaneo con la classe `dark:`2 min

Componenti riusabili03

Card con shadow + hover-lift, pricing tiers con variant primary, header sticky.

    Polish: dark mode + animazioni04

    Dark mode con classe `dark:`, micro-animazioni con animate-* e transition utilities.