Dec 26, 2025
Introduzione
Tailwind CSS è popolare e potente, ma non è sempre la soluzione migliore. Nei nostri progetti strutturati, con molti componenti e stili custom, abbiamo scoperto che può complicare più che semplificare.
In questo articolo spieghiamo perché secondo noi, in certi contesti, il CSS tradizionale resta più efficace.
Complessità
Tailwind può diventare difficile da gestire quando i progetti crescono. Classi inline lunghe e ripetitive rendono il codice meno leggibile e più complicato da mantenere nel tempo.
Ogni aggiornamento o refactor può diventare rischioso, soprattutto se il design cambia frequentemente.
<button
class="
font-medium rounded-lg px-4 py-2 md:px-6 md:py-3 transition-all duration-200 ease-in-out
data-[variant=primary]:bg-blue-600
data-[variant=primary]:text-white
data-[variant=primary]:hover:bg-blue-700
data-[variant=primary]:focus:ring-4
data-[variant=primary]:focus:ring-blue-300
data-[variant=primary]:disabled:bg-blue-300
data-[variant=primary]:disabled:cursor-not-allowed
data-[variant=secondary]:bg-white
data-[variant=secondary]:text-gray-800
data-[variant=secondary]:border
data-[variant=secondary]:border-gray-300
data-[variant=secondary]:hover:bg-gray-100
data-[variant=secondary]:focus:ring-4
data-[variant=secondary]:focus:ring-gray-200
data-[variant=secondary]:disabled:bg-gray-200
data-[variant=secondary]:disabled:text-gray-400
data-[variant=secondary]:disabled:cursor-not-allowed
data-[variant=outline]:bg-transparent
data-[variant=outline]:border-2
data-[variant=outline]:border-purple-600
data-[variant=outline]:text-purple-600
data-[variant=outline]:hover:bg-purple-600
data-[variant=outline]:hover:text-white
data-[variant=outline]:focus:ring-4
data-[variant=outline]:focus:ring-purple-300
data-[variant=outline]:disabled:border-gray-300
data-[variant=outline]:disabled:text-gray-400
data-[variant=outline]:disabled:cursor-not-allowed
text-sm md:text-base lg:text-lg
font-normal md:font-semibold lg:font-bold
uppercase md:capitalize
tracking-wide md:tracking-wider
leading-tight md:leading-snug
italic md:not-italic
hover:underline focus:line-through
decoration-2 decoration-white md:decoration-blue-200
shadow-sm md:shadow-lg
"
>
Bottone
</button>Personalizzazione
Progetti con stili custom richiedono flessibilità. Con Tailwind, creare eccezioni o modifiche puntuali spesso significa scrivere override complessi o estendere configurazioni già intricate.
Il CSS tradizionale, invece, permette di definire regole chiare, riutilizzabili e facilmente scalabili senza workaround.
Manutenzione
Quando il team cresce, la manutenzione diventa cruciale. Classi utility sparpagliate nel markup rendono più difficile capire quali regole influiscono su un componente specifico.
Con CSS modules, invece, ogni componente ha i suoi stili isolati e facilmente modificabili.
Performance
Il bundle generato da Tailwind è solitamente più piccolo rispetto a soluzioni CSS tradizionali, grazie al sistema di purge che elimina tutte le classi inutilizzate dal file finale.
Tuttavia, nei nostri progetti non abbiamo riscontrato differenze significative in termini di performance tra l’utilizzo di Tailwind e quello di CSS tradizionale.
Conclusione
Tailwind CSS è ottimo per prototipi veloci o progetti piccoli, ma nei progetti strutturati con stili complessi può introdurre più problemi che vantaggi. Il CSS tradizionale offre leggibilità, manutenzione e controllo, diventando la scelta più solida per sistemi grandi e longevi.