É 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@latest

Tonalità 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.