Leica Florian Robert

<< Torna ai progetti

TailWab — case study

Ruolo: Ideazione e sviluppo. Anno: 2024.

Sito: tailwab.leicaflorianrobert.dev

Uno strumento web che genera la configurazione di Tailwind CSS con la tipografia fluida: testi e spaziature che crescono con lo schermo, senza media query. Un progetto di Web Artisan Bros.

Stai vedendo questo case study con il motore Legacy. Per vederlo come è stato progettato, attiva il rendering nativo qui sotto.

Niente salti tra i breakpoint

Con i breakpoint la dimensione del testo salta da un valore all'altro. Con clamp() cresce in linea retta tra una larghezza minima e una massima dello schermo: niente media query, e le stesse proporzioni a ogni larghezza.

TailWab fa i conti per ogni classe di Tailwind, sull'idea di Utopia e della Fluid Typography, e dà il codice pronto da copiare.

Dalle impostazioni al codice

• Due pagine: Fluid Fonts per le 13 classi text-*, con dimensione e interlinea, e Fluid Spaces per le 34 chiavi della scala delle spaziature.
• Larghezza minima e massima, fattore di scala e mobile first: ogni cambio rifà la tabella, e ogni riga si può correggere a mano.
• Il codice da copiare: variabili CSS, un blocco @theme per Tailwind v4 o la configurazione per la v3.
• Tutto nel browser, senza backend, con i caratteri serviti dal sito stesso. Il codice generato è fissato dai test.

Le due pagine