Leica Florian Robert

<< Înapoi la proiecte

TailWab — studiu de caz

Rol: Concepție și dezvoltare. An: 2024.

Site: tailwab.leicaflorianrobert.dev

Un instrument web care generează configurația Tailwind CSS cu tipografie fluidă: texte și spațieri care cresc odată cu ecranul, fără media query. Un proiect Web Artisan Bros.

Vezi acest studiu de caz cu motorul Legacy. Pentru a-l vedea așa cum a fost proiectat, activează randarea nativă mai jos.

Fără salturi între breakpoint-uri

Cu breakpoint-urile, dimensiunea textului sare de la o valoare la alta. Cu clamp() crește în linie dreaptă între o lățime minimă și una maximă a ecranului: fără media query și cu aceleași proporții la orice lățime.

TailWab face calculele pentru fiecare clasă din Tailwind, după ideea Utopia și a Fluid Typography, și îți dă codul gata de copiat.

De la setări la cod

• Două pagini: Fluid Fonts pentru cele 13 clase text-*, cu dimensiune și înălțimea rândului, și Fluid Spaces pentru cele 34 de chei ale scării de spațieri.
• Lățimea minimă și maximă, factorul de scală și mobile first: fiecare schimbare reface tabelul, iar fiecare rând se poate corecta de mână.
• Codul de copiat: variabile CSS, un bloc @theme pentru Tailwind v4 sau configurația pentru v3.
• Totul în browser, fără backend, cu fonturile servite chiar de site. Codul generat este fixat de teste.

Cele două pagini