Leica Florian Robert

<< Back to projects

TailWab — case study

Role: Concept and development. Year: 2024.

Website: tailwab.leicaflorianrobert.dev

A web tool that generates the Tailwind CSS configuration with fluid typography: text and spacing that grow with the screen, with no media queries. A Web Artisan Bros project.

You are viewing this case study with the Legacy engine. To see it as it was designed, enable native rendering below.

No jumps between breakpoints

With breakpoints, text size jumps from one value to the next. With clamp() it grows in a straight line between a minimum and a maximum screen width: no media queries, and the same proportions at every width.

TailWab does the maths for every class in Tailwind, on the idea of Utopia and Fluid Typography, and hands you the code ready to copy.

From settings to code

• Two pages: Fluid Fonts for the 13 text-* classes, with size and line height, and Fluid Spaces for the 34 keys of the spacing scale.
• Minimum and maximum width, scale factor and mobile first: every change rebuilds the table, and every row can be adjusted by hand.
• The code to copy: CSS variables, an @theme block for Tailwind v4 or the configuration for v3.
• All in the browser, with no backend, and fonts served by the site itself. The generated code is pinned by tests.

The two pages