# Parte 2: Tailwind CSS

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.

```bash
npm install tailwindcss
```

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

```bash
npx tailwindcss init
```

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

{% hint style="info" %}
E' possibile inizializzare tailwindcss anche tramite CDN\ <mark style="color:purple;">`<script src="https://cdn.tailwindcss.com"></script>`</mark>
{% endhint %}

## 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:

```css
@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:

```html
<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>
```

<figure><img src="https://849926197-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxDq3rP48kZBQE0crO5rs%2Fuploads%2FNZS7InnpOlciPcy9YZUD%2Ftailwind_exempio.png?alt=media&#x26;token=84577d33-e754-446e-b0e9-29e6c760aaa3" alt=""><figcaption></figcaption></figure>

### 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.