Di recente sono entrato in contatto con Tailwind, un framework CSS molto interessante che si unisce al coro degli altri framework CSS ormai affermati e conosciuti come Bootstrap, Foundation, W3.CSS, ecc.
L'approccio di Tailwind è di tipo Utility-First, seguendo una filosofia per cui, sfruttando i suoi elementi, in linea teorica, si può fare a meno di dover scrivere righe e righe di codice CSS per personalizzare l'aspetto dei singoli elementi interessati.
Tuttavia, non voglio dilungarmi oltre sul framework in sé (se siete incuriositi, potete approfondire l'argomento direttamente sul sito ufficiale https://tailwindcss.com), per passare invece ad una breve guida per installarlo sui progetti Symfony.
Chi come me lavora abitualmente con questo framework PHP potrebbe essere interessato a provare Tailwind, ma, soprattutto per chi è alle prime armi, la sua installazione potrebbe non essere così immediata e lineare.

Un prerequisito necessario ma non sufficiente per l'installazione di Tailwind sui progetti Symfony è Encore; per chi infatti fosse abituato ad utilizzare (per esempio) Bootstrap importando semplicemente i file (.css e .js) di riferimento, ci sono brutte notizie: Tailwind non supporta questo metodo di lavoro. Ci si potrebbe appoggiare ad una CDN, ma le funzionalità del framework ne risentirebbero ritrovandovi a dover rinunciare ad alcune impostazioni e funzioni molto comode e utili (nessuna possibilità di installare plugin di terze parti, il tema di default non può essere modificato, ecc.). Per l'installazione di Encore e delle sue dipendenze (Node.js - fate attenzione alla versione - e Yarn), vi rimando alla documentazione ufficiale di Symfony: https://symfony.com/doc/current/frontend/encore/installation.html.
Se siete arrivati fin qui, do per scontato che abbiate Encore installato. A questo punto possiamo procedere con l'installazione del nostro Tailwind; per farlo, abbiamo bisogno di tre elementi: PostCSS, Autoprefixer e Tailwind stesso ovviamente.
PostCSS è un tool che permette di lavorare sulla parte CSS del progetto tramite JavaScript; Autoprefixer è un plugin di PostCSS che analizza quanto scritto in CSS e aggiunge automaticamente i così detti "vendor prefixes" alle regole CSS dichiarate, ovvero duplica eventualmente le regole specificandone i diversi prefissi relativi ai vari browser (es.: -webkit- per Chrome e Safari, -moz- per Firefox, -ms- per Internet Explorer, ecc.); Tailwind, in questo contesto, si inserisce come un plugin di PostCSS. Questo è l'approccio suggerito ed indicato dalla documentazione ufficiale di Tailwind, tuttavia per chi non volesse configurare PostCSS, è disponibile Tailwind CLI; la procedura di installazione però è diversa e non la affronterò in questa sede.
Procediamo quindi con l'installazione di quanto sopra. Digitiamo (io mi avvalgo di yarn, ma è possibile utilizzare anche npm):

yarn add tailwindcss postcss autoprefixer -D

Terminato il primo comando, continuiamo con:

yarn add postcss-loader@^5.0.0 --dev

Terminato anche questo, concludiamo con:

yarn add postcss-import

A questo punto, bisogna gestire i vari file di configurazione.
Il primo file su cui lavoriamo è quello che configura Tailwind: tailwind.config.js. Se nella root del progetto non è presente, lo creiamo, altrimenti ci assicuriamo che il contenuto sia il medesimo:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

In questo file si possono definire tutte le varie personalizzazioni che vogliamo apportare, dai colori, ai font, allo spacing, ecc.
Il secondo file è quello di configurazione di PostCSS: postcss.config.js. Sempre nella cartella di root del progetto, se esiste, lo modifichiamo come segue, altrimenti lo creiamo ex novo:

let tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'), //qui bisogna specificare il percorso del file definito prima
        require('autoprefixer'),
        require('postcss-import')
    ]
}

Il terzo file che ci interessa, va creato nella cartella assets/styles/, sotto la root/: tailwind.css. Al suo interno scriviamo:

@tailwind base;

@tailwind components;

@tailwind utilities;

Infine, il quarto e ultimo file interessato è quello di configurazione di Encore, che dovrebbe essere già presente nella root: webpack.config.js.
Alle righe già contenute al suo interno, dobbiamo aggiungere subito dopo la riga .setPublicPath('/build'), il seguente blocco di codice:

.addStyleEntry('tailwind', './assets/styles/tailwind.css') //il percorso è quello del file tailwind.css definito prima
    .enablePostCssLoader((options) => {
        options.postcssOptions = {
            config: './postcss.config.js', //il percorso qui è quello del file di configurazione di PostCSS
        };
    })

Arrivati a questo punto, abbiamo configurato il tutto ed installato tutto il necessario. Non ci resta che compilare gli assets con yarn (o npm).

Per poter utilizzare Tailwind, nei nostri template e file Twig bisognerà aggiungere queste righe:

{{ encore_entry_link_tags('tailwind') }}
{{ encore_entry_script_tags('tailwind') }}

In particolare, se lo si vuole usare a livello globale, è utile inserirle nel file base che sarà poi esteso da tutti i nostri template; la prima andrà messa nel block che definisce gli stylesheets, mentre la seconda nel block che definisce gli script.

Ora potete iniziare a sperimentare, giocare o semplicemente lavorare con il framework Tailwind, sfruttando tutte le sue funzionalità all'interno di un progetto Symfony.
Per qualsiasi dubbio, domanda e/o correzione, scrivetemi pure alla mail che trovate in homepage. Sarò più che lieto di migliorare e/o integrare questa guida con eventuali vostri suggerimenti.