@theunwindfront/tailwindcss-fluid-scale weekly downloads statistics

@theunwindfront/tailwindcss-fluid-scale

A high-performance, design-system integrated Tailwind CSS v4 plugin to compile mathematically fluid typography and spacing scales dynamically using native CSS clamp().

The Problem

Managing perfectly fluid layouts across a wide range of devices usually requires declaring repetitive responsive breakpoints (such as text-sm md:text-base lg:text-lg xl:text-3xl). This creates verbose stylesheets, leads to repetitive code, and causes sudden, jarring layout jumps when screen sizes cross responsive boundaries.

The Solution

This plugin calculates dynamic mathematical slopes on the fly, locking typography and spacing between a defined minimum viewport boundary (default 320px) and a maximum viewport boundary (default 1536px / 2xl).

Instead of jumping abruptly between breakpoints, sizes scale smoothly pixel-by-pixel:

The plugin programmatically reads boundaries directly from the active @theme context (e.g. screens.sm and screens.2xl), ensuring fluid computations stay perfectly synchronized with your design system.

Installation

Install the package via Composer (for Laravel integration) and NPM (for the Tailwind CSS plugin):

Add the plugin to your main stylesheet (Tailwind CSS v4):

For Tailwind v3, import it in tailwind.config.js:

Usage Guide

1. Fluid Typography

Scale font sizes between standard Tailwind theme keys. Typographic scale declarations also preserve pre-configured line heights automatically:

2. Fluid Spacing (Padding, Margin, Gaps, Width, Height)

Scale distances linearly across viewports: • Padding: fluid-p-{min}-{max}, fluid-px-{min}-{max}, fluid-py-{min}-{max}, fluid-pt-*-*, etc. • Margin: fluid-m-{min}-{max}, fluid-mx-{min}-{max}, fluid-my-{min}-{max}, fluid-mt-*-*, etc. • Gaps: fluid-gap-{min}-{max}, fluid-gap-x-*-*, fluid-gap-y-*-* • Dimensions: fluid-w-{min}-{max}, fluid-h-{min}-{max}

3. Custom Arbitrary Calculations

If you need to bypass standard design tokens, you can input arbitrary pixel or rem sizes using bracket syntax. The compiler will calculate the exact slope equation automatically on the fly:

Configuration Options

You can configure custom default viewport ranges directly within the @plugin initialization block:

👥 Credits

• Sagar Pansuriya - Lead Creator & Developer

🤝 Support

For questions or issues, contact pansuriya.sagar94@gmail.com

📄 License

The MIT License (MIT). Please see License File for more information.

Description from the npm listing.