Download the PHP package theunwindfront/tailwindcss-fluid-scale without Composer
On this page you can find all versions of the php package theunwindfront/tailwindcss-fluid-scale. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download theunwindfront/tailwindcss-fluid-scale
More information about theunwindfront/tailwindcss-fluid-scale
Files in theunwindfront/tailwindcss-fluid-scale
Package tailwindcss-fluid-scale
Short Description Tailwind CSS v4 plugin for automatic fluid typography and dynamic scale calculations using native clamp().
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package tailwindcss-fluid-scale
@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 [email protected]
📄 License
The MIT License (MIT). Please see License File for more information.
