PHPackages theunwindfront/tailwindcss-fluid-scale - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. theunwindfront/tailwindcss-fluid-scale ActiveLibrary[Utility & Helpers](/categories/utility) theunwindfront/tailwindcss-fluid-scale ====================================== Tailwind CSS v4 plugin for automatic fluid typography and dynamic scale calculations using native clamp(). 1.0.0(3d ago)10MITJavaScriptPHP ^8.2 Since Jun 7Pushed 2d agoCompare [ Source](https://github.com/theunwindfront/tailwindcss-fluid-scale)[ Packagist](https://packagist.org/packages/theunwindfront/tailwindcss-fluid-scale)[ RSS](/packages/theunwindfront-tailwindcss-fluid-scale/feed)WikiDiscussions main Synced 2d ago READMEChangelogDependencies (1)Versions (2)Used By (0) @theunwindfront/tailwindcss-fluid-scale ======================================= [](#theunwindfronttailwindcss-fluid-scale) [![Latest Version on Packagist](https://camo.githubusercontent.com/f6261169477ad0c5f9952893a71a0b6c209f8d3bd1e31d38436ee9dcf55b55d1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f746865756e77696e6466726f6e742f7461696c77696e646373732d666c7569642d7363616c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/tailwindcss-fluid-scale)[![Total Downloads](https://camo.githubusercontent.com/2420a43175e269ba444592508273aa7ee263e2a922da2172218d10cfd40128ee/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f746865756e77696e6466726f6e742f7461696c77696e646373732d666c7569642d7363616c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/theunwindfront/tailwindcss-fluid-scale)[![NPM Version](https://camo.githubusercontent.com/635b2395d42eaa4af5ed94f181b91a55e343d4d78dbe67a9147281da144be282/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f253430746865756e77696e6466726f6e742f7461696c77696e646373732d666c7569642d7363616c652e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@theunwindfront/tailwindcss-fluid-scale)[![License](https://camo.githubusercontent.com/f916c0a973895aef490e64e2935790a4faf10b5c7ebe8633159c0f7988618e21/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f746865756e77696e6466726f6e742f7461696c77696e646373732d666c7569642d7363616c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/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 ----------- [](#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 ------------ [](#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: ``` Dynamic Title Fluid Container Box ``` 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 ------------ [](#installation) ``` npm install @theunwindfront/tailwindcss-fluid-scale ``` Add the plugin to your main stylesheet (Tailwind CSS v4): ``` @import "tailwindcss"; @plugin "@theunwindfront/tailwindcss-fluid-scale"; ``` For Tailwind v3, import it in `tailwind.config.js`: ``` module.exports = { plugins: [ require('@theunwindfront/tailwindcss-fluid-scale'), ], } ``` --- Usage Guide ----------- [](#usage-guide) ### 1. Fluid Typography [](#1-fluid-typography) Scale font sizes between standard Tailwind theme keys. Typographic scale declarations also preserve pre-configured line heights automatically: ``` Fluid Heading Fluid paragraph body ``` ### 2. Fluid Spacing (Padding, Margin, Gaps, Width, Height) [](#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}` ``` A B C ``` ### 3. Custom Arbitrary Calculations [](#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: ``` Huge Scaling Headline ... ``` --- Configuration Options --------------------- [](#configuration-options) You can configure custom default viewport ranges directly within the `@plugin` initialization block: ``` @plugin "@theunwindfront/tailwindcss-fluid-scale" { minWidth: "375px"; maxWidth: "1440px"; } ``` --- 👥 Credits --------- [](#-credits) - **[Sagar Pansuriya](https://github.com/theunwindfront)** - Lead Creator & Developer 🤝 Support --------- [](#-support) For questions or issues, contact **** 📄 License --------- [](#-license) The MIT License (MIT). Please see [License File](LICENSE) for more information. ### Health Score 40 — FairBetter than 86% of packages Maintenance99 Actively maintained with recent releases Popularity2 Limited adoption so far Community6 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 3d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/57458034?v=4)[Sagar Pansuriya](/maintainers/theunwindfront)[@theunwindfront](https://github.com/theunwindfront) --- Top Contributors [![theunwindfront](https://avatars.githubusercontent.com/u/57458034?v=4)](https://github.com/theunwindfront "theunwindfront (2 commits)") ### Embed Badge ![Health badge](/badges/theunwindfront-tailwindcss-fluid-scale/health.svg) ``` [![Health](https://phpackages.com/badges/theunwindfront-tailwindcss-fluid-scale/health.svg)](https://phpackages.com/packages/theunwindfront-tailwindcss-fluid-scale) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3325.1M337](/packages/psalm-plugin-laravel)[renatomarinho/laravel-page-speed Laravel Page Speed 2.5k1.7M11](/packages/renatomarinho-laravel-page-speed)[illuminate/pipeline The Illuminate Pipeline package. 9348.3M264](/packages/illuminate-pipeline)[illuminate/pagination The Illuminate Pagination package. 10533.5M984](/packages/illuminate-pagination)[illuminate/redis The Illuminate Redis package. 8314.4M356](/packages/illuminate-redis)[spatie/laravel-export Create a static site bundle from a Laravel app 670139.5k6](/packages/spatie-laravel-export) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)