Responsive - lucadileo9/template-catalog GitHub Wiki

Configurazione Responsiva nel Tailwind CSS

Definizione dei Breakpoint (screens)

I breakpoint sono utilizzati per costruire layout responsive che si adattano alle dimensioni dello schermo.
Sono definiti nell'oggetto screens del file tailwind.config.js.

Estratto attuale da tailwind.config.js 

screens: {
  sm: '640px',   // Telefoni in landscape e tablet verticali
  md: '768px',   // Tablet orizzontali e piccoli laptop
  lg: '1024px',  // Laptop standard
  xl: '1280px',  // Desktop larghi
  '2xl': '1536px' // Schermi ultra-wide (es. 2K/4K)
}

Descrizione dettagliata

Nome Larghezza Contesto d’uso
sm 640px Layout mobili, telefoni in landscape
md 768px Tablet verticali o schermi piccoli
lg 1024px Laptop desktop comuni
xl 1280px Schermi desktop più larghi
2xl 1536px Schermi ultra-wide

Tailwind genera automaticamente classi responsive come:

  • text-sm / text-lg
  • max-w-md / px-4
  • md:text-xl, lg:px-8, ecc.

Questo ti permette di scrivere markup che reagisce ai dispositivi senza mai toccare un file CSS esterno.

Configurazione del Container (container)

Tailwind fornisce una classe utile chiamata container, che applica un width massimo e centra il contenuto.
Puoi personalizzare il comportamento del container tramite l’oggetto container nel tailwind.config.js.

Estratto attuale

container: {
  center: true,
  padding: {
    DEFAULT: '0.5rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
    xl: '3rem',
    '2xl': '4rem'
  }
}

Questa configurazione è coerente con i valori dei screens e permette di avere un sistema unico per responsività e layout principale.

Esempio di utilizzo

<div class="container mx-auto">
  Padding ridotto su schermi piccoli
</div>
⚠️ **GitHub.com Fallback** ⚠️