Pochissimi giorni fa, il 18 novembre 2020, è stata rilasciata la versione 2.0 di Tailwind CSS, uno dei nostri framework preferiti per quanto riguarda il frontend. Questo nuovo major update porta con sé tantissime novità molto utili per rendere lo sviluppo delle nostre applicazioni ancora più rapido e facile. Vediamo insieme le principali nuove features!
Dark mode
Negli ultimi anni tantissime app e siti web (ma anche i sistemi operativi dei nostri cellulari) hanno introdotto la Dark Mode, che permette agli utenti di affaticare meno la vista e di consumare meno la batteria dei dispositivi che vengono utilizzati.
Tailwind CSS 2.0 ora fornisce in maniera nativa il supporto alla Dark Mode. Per impostarla, basta semplicemente modificare la proprietà darkMode nel file tailwind.config.js, valorizzandola a media.
| // tailwind.config.js
module.exports = { … darkMode: “media” }
|
Adesso basterà anteporre il prefisso dark ai nomi delle classi e queste avranno effetto solo quando la Dark Mode è attiva
| <div class=”bg-white dark:bg-black”>
<h1 class=”text-gray-900 dark:text-white”>Dark mode</h1> <p class=”text-gray-500 dark:text-gray-300″> The feature you’ve all been waiting for. </p> </div>
|
Sarà possibile anteporre il prefisso dark anche agli elementi hover e responsive.
Nuova palette dei colori
Tailwind CSS 2.0 introduce una palette di colori completamente rinnovata ed ampliata. Nella versione 1.0 avevamo a disposizione 10 colori, mentre adesso possiamo scegliere tra ben 22 (17 colori e 5 scale di grigi). Inoltre, è stata introdotta anche una nuova sfumatura extra light:
| <div class=”bg-gray-50″>I can’t believe it’s not white.</div>
|
Ovviamente, tutta la gestione dei colori è rimasta completamente personalizzabile nel file tailwind.config.js.
Line-height predefiniti con le utility per la dimensione dei caratteri
Un’altra feature non presente nella prima release del framework ed introdotto con la nuova versione riguarda le utility per la dimensione dei caratteri. Adesso queste includono anche un proprio valore di line-height di default.
| // Tailwind’s default theme
module.exports = { theme: { // … fontSize: { xs: [‘0.75rem’, { lineHeight: ‘1rem’ }], sm: [‘0.875rem’, { lineHeight: ‘1.25rem’ }], base: [‘1rem’, { lineHeight: ‘1.5rem’ }], lg: [‘1.125rem’, { lineHeight: ‘1.75rem’ }], xl: [‘1.25rem’, { lineHeight: ‘1.75rem’ }], ‘2xl’: [‘1.5rem’, { lineHeight: ‘2rem’ }], ‘3xl’: [‘1.875rem’, { lineHeight: ‘2.25rem’ }], ‘4xl’: [‘2.25rem’, { lineHeight: ‘2.5rem’ }], ‘5xl’: [‘3rem’, { lineHeight: ‘1’ }], ‘6xl’: [‘3.75rem’, { lineHeight: ‘1’ }], ‘7xl’: [‘4.5rem’, { lineHeight: ‘1’ }], ‘8xl’: [‘6rem’, { lineHeight: ‘1’ }], ‘9xl’: [‘8rem’, { lineHeight: ‘1’ }], }, }, }
|
Nuovo breakpoint 2XL
Il team degli sviluppatori di Tailwind CSS non è rimasta indifferente alla sempre maggior diffusione di monitor ultra larghi introducendo un nuovo breakpoint. Difatti adesso è possibile utilizzare 2xl per la larghezza di 1536 px e superiori.
| <h1 class=”… 2xl:text-9xl”>Godzilla</h1>
|
Plugin per le form
Il team di Tailwind CSS, per venire incontro alle richieste della community che lamentava una scarsa attenzione allo stile delle form, ha rilasciato un plugin ufficiale che colma questa lacuna: forms.
Questo plugin “normalizza” lo stile di base delle form e permette di applicare lo stile che preferiamo con le utility di Tailwind CSS 2.0.
Per aggiungere il plugin forms, basta aggiungere una riga di codice al file di configurazione.
| // tailwind.config.js
module.exports = { // … plugins: [require(‘@tailwindcss/forms’)], }
|
@apply compatible con tutte le utility
Una delle novità che più apprezziamo della versione 2.0 di Tailwind CSS è la possibilità di utilizzare il comando @apply con tutte le utility che il framework ci mette a disposizione. Grazie ad esso è possibile personalizzare una classe CSS, utilizzando quelle predefinite di Tailwind. Ecco un esempio di come utilizzarlo:
| .btn {
@apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 hover:bg-blue-700 text-white; }
|
Fine del supporto a IE11
La nuova versione del framework non è più compatibile con Internet Explorer 11. Chi volesse mantenere questa compatibilità deve continuare ad usare la vecchia versione.
Il rilascio della versione 2.0 di Tailwind CSS rappresenta un bel passo avanti per questo framework, che colma alcune lacune della prima versione e introduce nuove funzionalità davvero utili per gli sviluppatori. Come per Laravel, anche Tailwind CSS ha dietro un team sempre al lavoro, che ascolta la community degli sviluppatori e migliora costantemente il proprio prodotto. Voi avete già aggiornato? Fateci sapere la vostra opinione.
