Skip to content

Tailwind Fluid

Tailwind Fluid

This is a Tailwind Plugin that handles web typography for the next generation of the web, this plugin when enabled allows for fluid typography and spacing without media queries. Values scaled between all viewport sizes using css clamp(), creating a seamless responsive experience.

https://davis-digital.co.uk/portfolio/tailwind-fluid/
class=”fluid-text-[16px/48px]”
class=”fluid-p-[8px/48px]”
class=”fluid-gap-[8px/32px]”
class=”fluid-leading-[20px/40px]”
class=”fluid-tracking-[0px/8px]”
class=”fluid-w-[60px/200px] fluid-h-[60px/200px]”
3 Cards with fluid-gap, fluid-p, fluid-text
Kitchen Sink - Full UI with fluid classes

Features

Scale font sizes smoothly from mobile to desktop using fluid-<property>-[min/max] syntax

Apply fluid padding, margin, and gap with fluid-p-, fluid-m-, and fluid-gap- utilities.

Configure your own min/max viewport breakpoints for the fluid calculations.

All calculations happen at build time. Pure CSS output with no JavaScript required.

Tailwind Fluid is installed via npm. The plugin has zero runtime overhead, it only runs during the build process when Tailwind generates CSS. When you write a class like fluid-text-[16px/48px], the plugin transforms it into pure CSS using the native clamp() function. The result is static CSS that ships to the browser with no JavaScript required. This means no performance impact, no bundle size increase, and full compatibility with server-side rendering and static site generators.

Ready to Start Your Project?

Let's create something amazing together. Get in touch to discuss your ideas and bring your vision to life.