Responsive Design

Come introdotto nella prima lezione di questa guida, una delle caratteristiche principali di Tailwind è l'utilizzo delle varianti, ovvero dei particolari prefissi che vengono impostati a delle utility class per cambiarne il funzionamento. Il responsive design all'interno di Tailwind CSS fa largo uso di questo concetto.

La sintassi delle varianti è molto semplice e espressiva. Una struttura HTML di questo tipo permette di modificare il peso di un testo sulla base dei breakpoint. In particolare di default verrà applicata la classe font-bold, su schermi medi font-medium e su schermi grandi font-light.

<span class="font-bold md:font-medium lg:font-light">
    Hello Tailwind CSS
</span>

Questa variante è disponibile di default per tutte le classi presenti nel framework. Potremmo quindi modificare non solo peso del font, ma anche dimensioni, layout e colori sfruttando questa particolare meccanica.

Personalizzazione dei breakpoints

Di default i breakpoint utilizzati in TailWind CSS sono questi:

• sm identifica risoluzioni superiori a 640px (@media (min-width: 640px))
• md identifica risoluzioni superiori a 768px (@media (min-width: 768px))
• lg identifica risoluzioni superiori a 1024px (@media (min-width: 1024px))
• xl identifica risoluzioni superiori a 1280px (@media (min-width: 1280px))

Ovviamente è possibile personalizzare qualsiasi aspetto di questo argomento, sia i breakpoint sia i nomi delle variazioni, modificando la proprietà screens dell'oggetto theme. Ecco due esempi:

module.exports = {
  theme: {
    screens: {
      'sm': '641px',
      'md': '769px',
      'lg': '1025px',
      'xl': '1281px',
    }
  }
}

In questo primo caso abbiamo modificato solamente il numero di pixel entro il quale scatta il breakpoint, aggiungendo 1 pixel alle impostazioni di default.

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  }
}

In questo secondo caso abbiamo rinominato le variazioni modificando di fatto il nome che le classi dovranno avere secondo una convenzione più eloquente.

Una funzionalità particolarmente interessante, anche se forse poco attuabile, è la possibilità di avere dei breakpoint multipli. Guardiamo un esempio esplicativo:

module.exports = {
  theme: {
    screens: {
      'md': [
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ]
    }
  }
}

In questo caso il breakpoint md scatta in due occasioni: tra 668px e 767px e sopra 868px. Ovviamente nella fascia intermedia tra 768px e 867px verranno applicate le regole CSS che presentano le variazioni inferiori (in questo caso il default o sm).

Nella documentazione ufficiale sono presenti ulteriori possibilità di personalizzazione, dalla possibilità di definire l'orientamento del device (portrait/landscape) alla applicazione di regole per la stampa. I più curiosi possono direttamente approfondire questi temi sul sito ufficiale.

Mobile First

L'approccio di Tailwind CSS al mondo del responsive design è quello del Mobile First. Questo lo si evince dal fatto che non esista una variazione per identificare i device con una risoluzione minore di 640px, come succede con altri framework come Bootstrap o Foundation. Questo perché le regole di default, senza variazioni, dovrebbero essere utilizzate per aggiungere stili partendo dal dispositivo con risoluzione minore.

Questo ci permette di progettare e sviluppare un'interfaccia web partendo dai dispositivo che offrono meno funzionalità sia in termini di dimensioni sia di prestazioni per poi gradualmente aggiungere elementi mano a mano che lo spazio a disposizione aumenta.