@jordandavila/tailwind-fluid

Figma-accurate fluid sizing utilities for Tailwind via clamp() and per-breakpoint scaling. Provide a screens object and get semantic classes like text-fluid-16, text-fluid-16/24, px-fluid-12, max-w-fluid-[720], etc.

Install

npm i -D @jordandavila/tailwind-fluid
# or
pnpm add -D @jordandavila/tailwind-fluid

Setup

// tailwind.config.ts
import { tailwindFluid } from '@jordandavila/tailwind-fluid'

export default {
  content: ['./src/**/*.{ts,tsx,js,jsx,html,njk}'],
  plugins: [
    tailwindFluid({
      screens: {
        mobile:  { figma: 375,  viewport: 375 },
        tablet:  { figma: 768,  viewport: 768 },
        desktop: { figma: 1560, viewport: 1024 },
        max:     { figma: 1560, viewport: 1560 }
      }
    })
  ]
}

What the plugin does

• Injects per-breakpoint root vars (--viewport, --scale, --min-width, --max-width, --figma-screen-width) so calc(var(--scale) * px) equals the Figma px at that breakpoint and scales in-between.
• Extends Tailwind theme.screens from your screens so media queries and scaling use the same cutoffs.

Class grammar

• Typography
  • text-fluid-16 → font-size: calc(var(--scale) * 16px)
  • text-fluid-16/24 → font-size: clamp(1rem, …, 1.5rem) (min/max in px; rem emitted)
  • leading-fluid-18/28 → line-height clamp
• Spacing
  • p-fluid-24, px-fluid-12, py-fluid-8
  • m-fluid-16, mx-fluid-12, my-fluid-20
  • gap-fluid-12, space-x-fluid-12, space-y-fluid-16
• Sizing
  • w-fluid-320, h-fluid-200, min-w-fluid-240, max-w-fluid-[720], etc.
• Transforms
  • translate-x-fluid-8, translate-y-fluid-12

Values are plain numbers in px (8 → 8px). Use a slash for ranges min/max (e.g., 38/58).

Options

interface FluidPluginOptions {
  screens: Record<string, { figma: number; viewport: number }>
}

• figma: The design width for that breakpoint.
• viewport: The real viewport breakpoint (media query) boundary.

Example

<h1 class="text-fluid-38/58 leading-fluid-44/64 max-w-fluid-[720]">
  Fluid typography that matches Figma at each breakpoint
</h1>
<p class="text-fluid-16/22 mt-fluid-12 max-w-fluid-[720] opacity-80">
  Scales between your min/max screens with `clamp()`, then locks to a fixed size at max.
</p>

License

MIT © 2025 Jordan Davila