Tailwind CSS: ecosistema, Flux e perché Laravel l'ha scelto

Il 7 gennaio 2026 Adam Wathan, il creatore di Tailwind CSS, ha scritto in una discussione su GitHub che il giorno prima il 75% del team di ingegneria aveva perso il lavoro "per l'impatto brutale che l'AI ha avuto sul business". E ha aggiunto un dato: il traffico alla documentazione era calato di circa il 40% dall'inizio del 2023, "nonostante Tailwind sia più popolare che mai".

È il paradosso da cui parte questo articolo. Tailwind CSS è diventato il framework CSS più scaricato e più citato dagli sviluppatori, è la base scelta da Laravel e intorno gli è cresciuto un ecosistema intero, Flux compreso. Uso Tailwind e Flux come base dei miei progetti, con la licenza Pro di Flux: qui provo a mettere in fila cos'è, cosa è cambiato con la versione 4, quali pacchetti contano e come Laravel ci è arrivato.

Cos'è Tailwind CSS (e perché divide)

Tailwind è un framework CSS "utility-first": invece di componenti già pronti come i bottoni di Bootstrap, offre migliaia di piccole classi che fanno una cosa sola, da combinare direttamente nell'HTML.

<!-- Bootstrap: un componente con uno stile già deciso -->
<button class="btn btn-primary">Salva</button>

<!-- Tailwind: lo stile costruito con classi atomiche -->
<button class="rounded-lg bg-indigo-600 px-4 py-2 font-semibold text-white hover:bg-indigo-500">
    Salva
</button>

A chi arriva dal CSS tradizionale la seconda riga sembra un passo indietro: lo stile torna nell'HTML. Adam Wathan ha spiegato il ragionamento nel 2017, nel saggio "CSS Utility Classes and Separation of Concerns": separare HTML e CSS per "argomento" crea fogli di stile che crescono senza controllo, mentre le classi utility si riusano ovunque e il CSS finale smette di crescere con il progetto.

In pratica, con Blade e Livewire questa scelta si sposa bene: i componenti si costruiscono una volta e il markup con le classi resta in un posto solo.

Tailwind CSS 4: cosa è cambiato

La versione 4.0, uscita il 22 gennaio 2025, è una riscrittura da zero. Le novità che contano di più per chi lavora con Laravel sono tre.

Un motore molto più veloce. Tailwind dichiara build complete fino a 5 volte più veloci e build incrementali oltre 100 volte più veloci. Sul loro progetto di riferimento i numeri sono questi:

La configurazione si fa nel CSS. Il vecchio tailwind.config.js non serve più: il tema si definisce con @theme, e ogni valore diventa una variabile CSS nativa, utilizzabile ovunque.

/* resources/css/app.css */
@import "tailwindcss";

@source "../views/**/*.blade.php";

@theme {
    --font-sans: "Inter", sans-serif;
    --color-brand-500: oklch(0.62 0.19 260);
}

Un plugin ufficiale per Vite e il rilevamento automatico dei file da analizzare, senza più configurare a mano la lista dei template.

Le versioni successive hanno aggiunto pezzi utili senza stravolgere niente: la 4.1 (aprile 2025) ha portato le ombre sul testo e le maschere, la 4.2 (febbraio 2026) nuove palette e un plugin per webpack, la 4.3 (maggio 2026) le utility per le scrollbar e per lo zoom. Per chi parte da un progetto in v3 esiste uno strumento di migrazione ufficiale, npx @tailwindcss/upgrade.

Quanto è diffuso davvero

I numeri di npm, il registro dei pacchetti JavaScript, raccontano bene il cambio di passo. A giugno 2020 Tailwind veniva scaricato 1,2 milioni di volte al mese, Bootstrap 11 milioni. Il sorpasso è arrivato tra il 2022 e il 2023. A maggio 2026 Tailwind ha superato i 461 milioni di download mensili, Bootstrap si è fermato a 26.

Un'avvertenza: i download contano anche le installazioni automatiche di build, pipeline e agenti. L'impennata tra gennaio e maggio 2026, da 163 a 461 milioni al mese, dice più sull'automazione che sulle persone. Ma la distanza con Bootstrap si vedeva già da anni, anche nei sondaggi: nello State of CSS 2024 Tailwind era il framework più citato, con 3.657 risposte contro le 2.623 di Bootstrap.

L'ecosistema: i pacchetti nati intorno a Tailwind

Tailwind da solo è un insieme di classi. Il motivo per cui è diventato uno standard è anche tutto quello che ci è cresciuto intorno, una parte fatta dallo stesso team e una parte dalla community.

Due cose saltano all'occhio. La prima: i pacchetti più scaricati non sono librerie di componenti ma strumenti che servono a chi costruisce componenti, come tailwind-merge e class-variance-authority. Sono il sottobosco di shadcn/ui e di molti design system React. La seconda: le librerie di componenti "classiche" come daisyUI e Flowbite hanno numeri molto più piccoli, perché il mercato si è spostato verso componenti che si copiano nel progetto o che arrivano dal framework.

Ci sono poi i prodotti commerciali di Tailwind Labs: Tailwind Plus (fino a marzo 2025 si chiamava Tailwind UI), una raccolta di blocchi e template, e Catalyst, un kit di componenti per React. Sono, di fatto, ciò che paga lo sviluppo del framework gratuito.

Flux UI: il kit di componenti per Livewire

Per chi usa lo stack TALL (Tailwind, Alpine.js, Laravel, Livewire) la libreria di riferimento è diventata Flux. L'ha creata Caleb Porzio, l'autore di Livewire, che l'ha presentata nel keynote di Laracon US 2024. La versione 1.0 è uscita a settembre 2024, la 2.0 a febbraio 2025 con datepicker, calendario e grafici, aggiungendo, secondo Laravel News, solo 13 kB al bundle.

Si installa come un pacchetto Composer e si integra nel CSS di Tailwind:

composer require livewire/flux

/* resources/css/app.css */
@import "tailwindcss";
@import "../../vendor/livewire/flux/dist/flux.css";

{{-- Nel layout: tema chiaro/scuro e script di Flux --}}
@fluxAppearance
...
@fluxScripts

{{-- Un componente --}}
<flux:button variant="primary" wire:click="save">Salva</flux:button>

Flux ha una parte gratuita con i componenti di base (bottoni, input, modali, dropdown e altri) e una versione Pro con componenti avanzati come tabelle, date picker, editor di testo ricco, grafici e kanban. La licenza Pro si paga una volta: 149 dollari per un progetto, 299 per progetti illimitati, 799 per un team, con aggiornamenti gratuiti per sempre.

Perché l'ho scelto io

Prima di Flux ho valutato diverse librerie per Livewire e Blade. Molte erano complesse e pesanti, altre avevano una grafica poco moderna, e alcune chiedevano di scrivere a mano il JavaScript per far funzionare i componenti. Flux mi è sembrato il più pulito, il più facile da usare e il più completo, con uno sviluppo costante che si vede dalla frequenza dei rilasci. È relativamente leggero e reattivo, ed è la scelta che ha fatto Laravel stesso. Lavorando con lo stack TALL, è stata quasi una scelta naturale, al punto da prendere la licenza Pro.

Perché Laravel ha scelto Tailwind

Per anni Laravel ha avuto Bootstrap di default. Fino alla versione 5.8 il package.json di un nuovo progetto includeva Bootstrap, jQuery e Vue. A giugno 2019 tutto lo scaffolding frontend è stato spostato nel pacchetto separato laravel/ui, e da lì la strada è cambiata.

La scelta di Jetstream non fu indolore: molti sviluppatori abituati a Bootstrap protestarono. Taylor Otwell rispose su X che "non vi è stato tolto niente: laravel/ui esiste ancora" (ottobre 2020).

Le motivazioni le ha spiegate lui stesso in seguito. Al Laravel Podcast del marzo 2022, parlando della riscrittura di Spark e Jetstream: "volevamo anche abbandonare Bootstrap per Tailwind", e Jetstream è stato "convertito a Tailwind e modernizzato". In una sessione di domande e risposte dello stesso anno, secondo il resoconto di Laravel Daily, è stato ancora più diretto: "Usiamo Tailwind in Laravel, non usiamo affatto Bootstrap, e vogliamo usare le cose che usiamo e che ci piacciono", ammettendo che era stata "una decisione controversa".

Non esiste un manifesto tecnico che spieghi perché Tailwind sia migliore. Ci sono tre ragioni più semplici. Il team lo usava già per i propri prodotti. Tailwind permetteva di dare agli starter kit un aspetto moderno senza imporre il look riconoscibile di Bootstrap. E Adam Wathan veniva dalla community Laravel: aveva parlato a Laracon US nel 2016 e creato corsi come Test-Driven Laravel.

Quando Laravel 12 ha introdotto i nuovi starter kit, la documentazione ufficiale ha messo nero su bianco la combinazione: i kit React, Svelte e Vue usano "Inertia 2, TypeScript, shadcn/ui e Tailwind", mentre quelli Livewire usano "la libreria di componenti Flux UI basata su Tailwind".

Il paradosso del 2026: più usato, meno sostenibile

Torniamo all'inizio. Nella stessa discussione su GitHub, Adam Wathan ha spiegato il meccanismo: "la documentazione è l'unico modo in cui le persone scoprono i nostri prodotti commerciali, e senza clienti non possiamo permetterci di mantenere il framework". Il giorno prima aveva rifiutato di rendere la documentazione più facile da leggere per i modelli linguistici, perché avrebbe significato ancora meno traffico.

Messi insieme, i dati raccontano una cosa scomoda. Tra gennaio e maggio 2026 i download di Tailwind sono quasi triplicati, mentre il team che lo sviluppa si è ridotto a un quarto degli ingegneri. Il ragionamento di Wathan è lineare: chi trova la risposta in un assistente AI non passa dalla documentazione, e quindi non incontra i prodotti a pagamento che finanziano il progetto.

Il framework è rilasciato con licenza MIT e il codice resta di tutti. La domanda aperta è un'altra: quanti progetti open source vivono dello stesso modello, documentazione gratuita che porta a prodotti a pagamento, e quanto può reggere quel modello quando il traffico lo intercettano le AI.

Domande frequenti su Tailwind CSS e Flux

Tailwind CSS è gratis?

Sì. Il framework è rilasciato con licenza MIT. Sono a pagamento solo i prodotti commerciali di Tailwind Labs, come Tailwind Plus.

Meglio Tailwind o Bootstrap?

Dipende dal progetto. Bootstrap dà componenti pronti con un aspetto riconoscibile; Tailwind dà i mattoni per costruire un design proprio. Per i nuovi progetti Laravel la scelta è già fatta dagli starter kit ufficiali, che usano Tailwind.

Dove si configura Tailwind CSS 4?

Direttamente nel file CSS, con @import "tailwindcss" e un blocco @theme per i valori del tema. Il file tailwind.config.js non è più necessario.

Flux UI Pro è gratuito? Quanto costa?

In parte. Flux ha una versione gratuita con i componenti di base e una versione Pro a pagamento per i componenti avanzati come tabelle, date picker, grafici ed editor di testo. La licenza Pro si paga una volta: 149 dollari per un progetto, 299 per progetti illimitati, 799 per un team.

Flux funziona senza Livewire?

No. Flux è pensato per Livewire e per Blade, e richiede Livewire nel progetto. Per React e Vue gli starter kit di Laravel usano shadcn/ui.

Come si migra da Tailwind 3 a Tailwind 4?

Con lo strumento ufficiale npx @tailwindcss/upgrade, che converte la configurazione e le classi cambiate. Nei progetti Laravel va aggiornato anche Vite, passando al plugin @tailwindcss/vite.

Un ecosistema solido, un'azienda da tenere d'occhio

A metà 2026 Tailwind è lo standard di fatto per chi costruisce interfacce con Laravel. Lo dicono gli starter kit ufficiali, i download e l'ecosistema di pacchetti che ci si è costruito sopra, Flux compreso. Per chi lavora con lo stack TALL, il trio Tailwind, Livewire e Flux copre quasi tutto quello che serve per costruire un'interfaccia senza scrivere JavaScript a mano.

Il punto debole sta fuori dal codice, che è libero e resterà disponibile: riguarda l'azienda dietro, che deve trovare un modo per sostenersi in un mondo in cui le risposte le danno sempre più spesso le AI, e chi usa Tailwind ogni giorno ha interesse a seguire come andrà a finire.