É uscito recentemente la nuova versione di Tailwind CSS, dobbiamo perciò rimboccarci le maniche e vedere le novità introdotte.
Installazione
Cominciamo installando Tailwind 3.3 come Dev Dependecy.
npm install -D tailwindcss@latestTonalità di Colore 950
Pensata soprattutto per la modalità scura, la nuova sfumatura di colore 950 va ad aggiungersi alle precedenti da 100 a 900. Queste sfumature permetteranno di ottenere dark mode più coerenti, rispetto a ciò che potevamo fare in precedenza con i colori di base.
<div class="bg-slate-950"></div>Supporto per ESM e Typescript
Da adesso è possibile configurare Tailwind CSS persino nei progetti ESM e Typescript. Il file di configurazione verrà automaticamente generato sul comando npx tailwindcss init.
Supporto semplificato per RTL
Possiamo specificare proprietà in base all’orientamento del testo LTR o RTL. In questo esempio modifichiamo il margine a sinistra per la scrittura occidentale ed il margine a destra per quella araba.
<div class="ltr:ml-3 rtl:mr-3"> <!-- ... --></div>Posizioni per i gradienti
Sono state aggiunte nuove classi per creare gradienti ancora più complessi. Ad questo gradiente a tre colori con indigo dal 10%, passando per l’azzurro al 30% e concludendo col verde dal 90%.
<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-green-500 to-90% ..."> <!-- ... --></div>Rimozione plugin Line-clamp
La classe line-clamp è parte integrante di Tailwind CSS e non più legata al plugin Line-clamp.
Nuova classe per Line-height e Font-size
É stata inserita una nuova classe che permette di combinare la classica combinazione per line-height e font-size. Ecco un esempio di queste due regole gestite separamente e con la nuova classe aggiunta.
<p class="text-lg leading-7 ...">//classi separate</p><p class="text-lg/7 ...">//classi unite</p>Variabili CSS senza var()
Sempre nell’ottica di scrivere meno caratteri, è stata inserita la possibilità di non utilizzare la parola chiave var() per lavorare con le variabili CSS.
//con var className="bg-[var(--brand-color)]hover:bg-[var(--brand-hover-color)]" //senza var className="bg-[--brand-color]hover:bg-[--brand-hover-color]"Immagini per le liste puntate
Con la classe list-image-* possiamo specificare l’url di un’immagine e averla come punto per gli elementi della lista.
<ul class="list-image-[url(carrot.png)] ..."> <li>ciao</li> <!-- ... --></ul>Posizione dei Caption in Tabella
Avete presente l’elemento <caption>? Con la nuova classe caption-* possiamo specificare se li vogliamo sopra (top) o sotto (bottom) la tabella.
<table> <caption class="caption-bottom"> Table 3.1: Professional wrestlers and their signature moves. </caption> <!-- ... --></table>Questo è quanto TailwindCSS 3.3 porta come nuove funzionalità. Vi lascio il link all’articolo del blog ufficiale di Tailwind.
