Tailwind CSS ha rilasciato la versione 4.0, un aggiornamento completo che trasforma l'esperienza di sviluppo con prestazioni straordinarie e funzionalità all'avanguardia. Questa nuova versione è stata completamente riscritta per sfruttare al massimo le più recenti tecnologie CSS e offrire un'esperienza di sviluppo più fluida ed efficiente.

Un Motore ad Alte Prestazioni

Il cambiamento più evidente in Tailwind CSS v4.0 è la velocità. I benchmark mostrano miglioramenti impressionanti:

Build completa: 3,78 volte più veloce (da 378ms a 100ms)
Ricostruzione incrementale con nuovo CSS: 8,8 volte più veloce (da 44ms a 5ms)
Ricostruzione incrementale senza nuovo CSS: 182 volte più veloce (da 35ms a soli 192 microsecondi)

Questo significa che le build che non necessitano di compilare nuovo CSS vengono completate in microsecondi, un miglioramento di oltre 100 volte rispetto alla versione precedente.

Progettato per il Web Moderno

Tailwind CSS v4.0 sfrutta pienamente le funzionalità CSS più recenti:

Cascade layers native: maggiore controllo su come le regole di stile interagiscono tra loro
Proprietà personalizzate registrate: migliorano le prestazioni sulle pagine grandi e consentono animazioni avanzate
color-mix(): permette di regolare l'opacità di qualsiasi valore di colore
Proprietà logiche: semplificano il supporto RTL e riducono la dimensione del CSS generato

Installazione Semplificata

Il processo di installazione è stato notevolmente semplificato:

Installare Tailwind CSS: npm i tailwindcss @tailwindcss/postcss

Aggiungere il plugin PostCSS:

export default {
  plugins: ["@tailwindcss/postcss"],
};

Importare Tailwind nel CSS: @import "tailwindcss";

I miglioramenti includono:

Una sola riga di CSS invece delle precedenti direttive @tailwind
Zero configurazione necessaria per iniziare
Nessun plugin esterno richiesto per gestire le regole @import o i prefissi vendor

Plugin Ufficiale per Vite

Per gli utenti di Vite, è ora disponibile un plugin ufficiale @tailwindcss/vite che offre prestazioni ancora migliori rispetto all'utilizzo come plugin PostCSS:

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [tailwindcss()],
});

Rilevamento Automatico del Contenuto

Una delle migliori novità è il rilevamento automatico dei file di template. Non è più necessario configurare manualmente l'array content come in v3. Tailwind utilizza diverse euristiche:

Ignora automaticamente tutto ciò che è nel file .gitignore
Esclude automaticamente tutte le estensioni binarie come immagini e video
Permette di aggiungere esplicitamente sorgenti con la direttiva @source nel CSS:
```
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";
```

Supporto Integrato per Import

Tailwind ora gestisce nativamente le regole @import, eliminando la necessità di plugin aggiuntivi come postcss-import:

// Non più necessario:
export default {
  plugins: ["postcss-import", "@tailwindcss/postcss"],
};

Configurazione CSS-first

Un cambiamento fondamentale è il passaggio dalla configurazione JavaScript alla configurazione direttamente in CSS. Invece di un file tailwind.config.js, tutte le personalizzazioni possono essere definite direttamente nel file CSS dove si importa Tailwind:

@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  /* ... */
}

Variabili CSS per il Theme

Tutti i token di design sono ora disponibili come variabili CSS standard, facilitando il loro utilizzo in stili inline o con librerie di animazione:

:root {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  /* ... */
}

Valori e Varianti Dinamiche

Molte utility e varianti ora accettano valori arbitrari senza necessità di configurazione:

Creazione di griglie di qualsiasi dimensione: grid-cols-15
Targeting di attributi dati booleani personalizzati: data-current:opacity-100

Le utility di spaziatura come px-*, mt-*, w-*, h-* derivano da una singola scala e accettano qualsiasi valore:

@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
}

Palette di Colori P3 Modernizzata

L'intera palette di colori predefinita è stata aggiornata da RGB a OKLCH, sfruttando uno spazio colore più ampio per rendere i colori più vivaci dove prima erano limitati dallo spazio colore sRGB.

Query Container Native

Il supporto per le container query è ora integrato direttamente in Tailwind, eliminando la necessità del plugin @tailwindcss/container-queries:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

Sono state aggiunte anche le query container max-width con la nuova variante @max-* e la possibilità di combinare varianti @min-* e @max-*.

Nuove Utility per Trasformazioni 3D

Finalmente sono disponibili API per trasformazioni 3D, come rotate-x-*, rotate-y-*, scale-z-*, translate-z-* e molto altro:

<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d ...">
    <!-- ... -->
  </article>
</div>

API per Gradienti Espanse

Le funzionalità per i gradienti sono state notevolmente ampliate:

Angoli per gradienti lineari: bg-linear-45 per creare un gradiente a 45 gradi
Modificatori di interpolazione: bg-linear-to-r/srgb o bg-linear-to-r/oklch per controllare la modalità di interpolazione del colore
Gradienti conici e radiali: nuove utility bg-conic-* e bg-radial-*

Supporto per @starting-style

La nuova variante starting aggiunge supporto per la funzionalità CSS @starting-style, permettendo di transizionare le proprietà di un elemento quando viene visualizzato per la prima volta:

<div>
  <button popovertarget="my-popover">Controlla aggiornamenti</button>
  <div
    popover
    id="my-popover"
    class="transition-discrete starting:open:opacity-0 ...">
    <!-- ... -->
  </div>
</div>

Variante not-*

È stata aggiunta una nuova variante not-* che supporta la pseudo-classe CSS :not() e permette di negare media query e query @supports:

<div class="not-hover:opacity-75">
  <!-- ... -->
</div>

Altre Nuove Utility e Varianti

Tailwind CSS v4.0 include molte altre nuove utility e varianti:

inset-shadow- e inset-ring-: per sovrapporre fino a quattro livelli di ombre su un singolo elemento
field-sizing: per ridimensionare automaticamente le textarea senza JavaScript
color-scheme: per eliminare le scrollbar chiare in modalità scura
font-stretch: per regolare con precisione i font variabili
variante inert: per stilizzare elementi non interattivi con l'attributo inert
varianti nth-*: per applicare stili avanzati basati sulla posizione
variante in-*: simile a group-*, ma senza la necessità della classe group
supporto per :popover-open: usando la variante open esistente
variante descendant: per stilizzare tutti gli elementi discendenti

Conclusione

Tailwind CSS v4.0 rappresenta un enorme passo avanti nell'evoluzione del framework, offrendo prestazioni straordinarie, una configurazione semplificata e un'ampia gamma di nuove funzionalità progettate per il web moderno. Questa versione mantiene l'essenza di Tailwind mentre introduce miglioramenti significativi che renderanno lo sviluppo più rapido ed efficiente.

Per maggiori informazioni e per iniziare a utilizzare Tailwind CSS v4.0, visita il sito ufficiale di Tailwind CSS.

Tailwind CSS v4.0 è arrivato!

Edoardo Midali