> For the complete documentation index, see [llms.txt](https://learn.ziomark.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.ziomark.xyz/css/parte-2-tailwind-css.md).

# 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="/files/C2UVwF8qt0Kz10nw2vHy" 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.ziomark.xyz/css/parte-2-tailwind-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.