Parte 2: Tailwind CSS

Tailwind CSS è un framework CSS utility-first che permette di costruire rapidamente interfacce utente personalizzate senza uscire dal tuo markup

Tailwind è un framework CSS progettato per essere altamente personalizzabile e facilita lo styling di elementi HTML direttamente nelle classi del tuo markup.

Perché Usare Tailwind CSS?

• Rapidità di sviluppo: Aggiungi stili direttamente nelle tue classi HTML, evitando switch costanti tra HTML e CSS.

• Personalizzazione: Facile da personalizzare per adattarsi al design system della tua applicazione.

• Responsività: Gestisce la responsività con classi basate su breakpoint facilmente applicabili.

• Consistenza: Riduce la duplicazione e aumenta la coerenza utilizzando utility configurabili.

Installazione di Tailwind CSS

Per iniziare con Tailwind CSS, puoi aggiungerlo al tuo progetto tramite npm o yarn. Qui ci concentreremo sull'installazione con npm.

npm install tailwindcss

Dopo l'installazione, puoi configurare Tailwind nel tuo progetto generando il file di configurazione:

npx tailwindcss init

Questo comando crea un file tailwind.config.js che puoi personalizzare secondo le tue necessità.

E' possibile inizializzare tailwindcss anche tramite CDN <script src="https://cdn.tailwindcss.com"></script>

Configurazione del tuo progetto

Dopo aver installato Tailwind, integralo nel tuo foglio di stile. Ad esempio, in un progetto PostCSS:

1. Crea un file CSS (es. src/styles.css).

2. Aggiungi le direttive Tailwind per layer:

@tailwind base;
@tailwind components;
@tailwind utilities;

Ora Tailwind è pronto per essere utilizzato nel tuo progetto.

Esercizio Finale: Creazione di una Card

Obiettivo: Costruire una card di presentazione per un prodotto utilizzando Tailwind CSS.

Requisiti:

• La card deve avere un'immagine, un titolo, una descrizione e un bottone.

• Deve essere responsiva e ben organizzata su dispositivi mobile e desktop.

Codice HTML di partenza:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/your-image.jpg" alt="Product Image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Titolo del Prodotto</div>
    <p class="text-gray-700 text-base">
      Descrizione del prodotto qui. Qualcosa di accattivante e breve.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Acquista ora
    </button>
  </div>
</div>

Istruzioni:

1. Modifica l'HTML e le classi Tailwind per personalizzare il design della tua card.

2. Aggiungi effetti di transizione su hover per il bottone.

3. Assicurati che la card sia responsiva, aggiungendo classi come sm:, md: per adattare il layout ai vari breakpoint.