tailwind-elasticss

Elastic responsive utilities for Tailwind CSS v4 with intelligent clamp() and viewport-based fluid scaling.

Features

✨ Automatic fluid scaling - Values scale smoothly with viewport size 🎯 Container query support - Respond to parent container size 🔧 Customizable via CSS variables - Full control when you need it ⚡ Zero JavaScript - Pure CSS solution for Tailwind CSS v4 📦 Tiny footprint - Just CSS utilities, no dependencies 📝 Complete typography support - Fluid font-size and line-height 🎨 Viewport-aware - Intelligent scaling from mobile to desktop

Installation

npm install tailwind-elasticss

Usage

Add the plugin to your CSS file:

@import "tailwindcss";
@import "tailwind-elasticss";

Quick Start

<!-- Width that scales from 492px to 672px based on viewport -->
<div class="w-fluid-[560px]">
  Fluid width
</div>

<!-- Typography that scales from 28px to 38px -->
<h1 class="text-fluid-[32px] leading-fluid-[40px]">
  Fluid heading
</h1>

Table of Contents

• How It Works
• Layout Utilities
• Typography Utilities
• Container Queries
• Customization
• Complete Examples
• API Reference

How It Works

Every fluid utility automatically calculates three values:

• Minimum: 88% of your base value
• Preferred: Scales smoothly with viewport size
• Maximum: 120% of your base value

Example: w-fluid-[500px]

width: clamp(
  440px,  /* 88% of 500px */
  /* Scales smoothly between 440px and 600px as viewport grows */
  600px   /* 120% of 500px */
);

This creates a 36% range of flexibility (from 88% to 120%) that adapts to different screen sizes automatically.

Layout Utilities

Width - w-fluid-[value]

Width that scales smoothly with viewport width.

<!-- Scales from 440px (mobile) to 600px (desktop) -->
<div class="w-fluid-[500px]">
  Responsive width
</div>

<!-- Works with any unit -->
<div class="w-fluid-[50rem]">
  Width in rems
</div>

<!-- Even percentages -->
<div class="w-fluid-[80%]">
  Percentage-based
</div>

Generated CSS for w-fluid-[500px]:

width: clamp(440px, /* fluid calculation */, 600px);

Height - h-fluid-[value]

Height that scales smoothly with viewport height.

<!-- Scales from 264px to 360px based on viewport height -->
<div class="h-fluid-[300px]">
  Responsive height
</div>

<!-- Perfect for hero sections -->
<section class="h-fluid-[100vh]">
  Hero section
</section>

Generated CSS for h-fluid-[300px]:

height: clamp(264px, /* fluid calculation */, 360px);

Max Width & Max Height

Fluid maximum dimensions.

<!-- Container with fluid max-width -->
<article class="max-w-fluid-[800px]">
  Article content
</article>

<!-- Fluid max-height -->
<div class="max-h-fluid-[500px]">
  Scrollable content
</div>

Typography Utilities

Font Size - text-fluid-[value]

Font size that scales smoothly with viewport width for perfect readability at any screen size.

<!-- Heading that scales from 42px to 58px -->
<h1 class="text-fluid-[48px]">
  Display Heading
</h1>

<!-- Body text that scales from 14px to 19px -->
<p class="text-fluid-[16px]">
  Body text that's always readable
</p>

<!-- Small text -->
<small class="text-fluid-[12px]">
  Fine print
</small>

Generated CSS for text-fluid-[32px]:

font-size: clamp(28.16px, /* fluid calculation */, 38.4px);

Line Height - leading-fluid-[value]

Line height that scales proportionally with font size.

<!-- Perfectly paired with fluid font-size -->
<h1 class="text-fluid-[48px] leading-fluid-[56px]">
  Heading with proportional line height
</h1>

<p class="text-fluid-[16px] leading-fluid-[24px]">
  Paragraph with optimal readability
</p>

Generated CSS for leading-fluid-[24px]:

line-height: clamp(21.12px, /* fluid calculation */, 28.8px);

Complete Typography Scale

<div>
  <h1 class="text-fluid-[64px] leading-fluid-[72px]">Display</h1>
  <h2 class="text-fluid-[48px] leading-fluid-[56px]">Heading 1</h2>
  <h3 class="text-fluid-[32px] leading-fluid-[40px]">Heading 2</h3>
  <h4 class="text-fluid-[24px] leading-fluid-[32px]">Heading 3</h4>
  <p class="text-fluid-[16px] leading-fluid-[24px]">Body text</p>
  <small class="text-fluid-[14px] leading-fluid-[20px]">Small text</small>
</div>

Container Queries

All utilities have container query variants that respond to parent container size instead of viewport.

Requires @container on parent element.

<div class="@container">
  <!-- Width responds to container, not viewport -->
  <div class="w-fluid-cq-[300px]">
    Container-aware width
  </div>

  <!-- Typography scales with container -->
  <h2 class="text-fluid-cq-[24px] leading-fluid-cq-[32px]">
    Container-aware heading
  </h2>
</div>

Sidebar Example

<div class="@container flex">
  <aside class="w-fluid-cq-[280px] @container">
    <h3 class="text-fluid-cq-[20px] leading-fluid-cq-[28px]">
      Sidebar Title
    </h3>
    <p class="text-fluid-cq-[14px] leading-fluid-cq-[20px]">
      Content that adapts to sidebar width
    </p>
  </aside>
  <main class="flex-1">
    Main content
  </main>
</div>

Card Grid Example

<div class="@container grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="@container">
    <h3 class="text-fluid-cq-[20px] leading-fluid-cq-[28px]">
      Card Title
    </h3>
    <p class="text-fluid-cq-[14px] leading-fluid-cq-[20px]">
      Text that scales with card size
    </p>
  </div>
</div>

Customization

Customizable Variables

Every fluid utility exposes CSS variables you can customize:

<!-- Customize min/max multipliers -->
<div style="--fluid-min-mult: 0.75; --fluid-max-mult: 1.5">
  <div class="w-fluid-[400px]">
    <!-- Scales from 300px (75%) to 600px (150%) -->
  </div>
</div>

<!-- Customize viewport minimum -->
<div style="--vw-min: 30rem">
  <div class="w-fluid-[500px]">
    <!-- Starts scaling from 30rem viewport -->
  </div>
</div>

<!-- Customize scale factor -->
<div style="--current-scale: 1.5">
  <div class="w-fluid-[400px]">
    <!-- Base value multiplied by 1.5 -->
  </div>
</div>

Global Typography Scale

<!-- Define global bounds for consistent scaling -->
<body style="--fluid-min-mult: 0.9; --fluid-max-mult: 1.15">
  <h1 class="text-fluid-[48px]">Scales from 43.2px to 55.2px</h1>
  <h2 class="text-fluid-[32px]">Scales from 28.8px to 36.8px</h2>
  <p class="text-fluid-[16px]">Scales from 14.4px to 18.4px</p>
</body>

Available CSS Variables

| Variable | Default | Description | |----------|---------|-------------| | --current-scale | 1 | Multiplier for base value | | --vw-min / --vh-min | 20rem | Minimum viewport for scaling | | --fluid-min-mult | 0.88 | Minimum size multiplier (88%) | | --fluid-max-mult | 1.2 | Maximum size multiplier (120%) |

Complete Examples

Hero Section

<section class="w-fluid-[100vw] h-fluid-[100vh]">
  <div class="max-w-fluid-[1200px] mx-auto px-4">
    <h1 class="text-fluid-[64px] leading-fluid-[72px] font-bold">
      Welcome to Our Site
    </h1>
    <p class="text-fluid-[20px] leading-fluid-[32px] mt-4">
      Subtitle that scales perfectly
    </p>
  </div>
</section>

Article Layout

<article class="@container max-w-fluid-cq-[800px] mx-auto">
  <header class="@container mb-8">
    <h1 class="text-fluid-cq-[48px] leading-fluid-cq-[56px] font-bold">
      Article Title
    </h1>
    <p class="text-fluid-cq-[16px] leading-fluid-cq-[24px] text-gray-600">
      Published on Jan 1, 2025
    </p>
  </header>

  <div class="@container prose">
    <p class="text-fluid-cq-[18px] leading-fluid-cq-[32px]">
      Article content that maintains perfect readability
      at any container size.
    </p>
  </div>
</article>

Dashboard with Fluid Widgets

<div class="@container grid grid-cols-1 md:grid-cols-3 gap-6">
  <!-- Widget 1 -->
  <div class="@container w-fluid-cq-[350px] p-6 bg-white rounded-lg">
    <h2 class="text-fluid-cq-[24px] leading-fluid-cq-[32px] font-bold">
      Total Users
    </h2>
    <p class="text-fluid-cq-[48px] leading-fluid-cq-[56px] font-bold text-blue-600">
      12,345
    </p>
  </div>

  <!-- Widget 2 -->
  <div class="@container w-fluid-cq-[350px] p-6 bg-white rounded-lg">
    <h2 class="text-fluid-cq-[24px] leading-fluid-cq-[32px] font-bold">
      Revenue
    </h2>
    <p class="text-fluid-cq-[48px] leading-fluid-cq-[56px] font-bold text-green-600">
      $45,678
    </p>
  </div>

  <!-- Widget 3 -->
  <div class="@container w-fluid-cq-[350px] p-6 bg-white rounded-lg">
    <h2 class="text-fluid-cq-[24px] leading-fluid-cq-[32px] font-bold">
      Growth
    </h2>
    <p class="text-fluid-cq-[48px] leading-fluid-cq-[56px] font-bold text-purple-600">
      +23%
    </p>
  </div>
</div>

Modal Dialog

<div class="@container fixed inset-0 flex items-center justify-center">
  <div class="@container w-fluid-cq-[500px] max-w-fluid-cq-[90%] bg-white rounded-lg p-8">
    <h2 class="text-fluid-cq-[28px] leading-fluid-cq-[36px] font-bold">
      Confirm Action
    </h2>
    <p class="text-fluid-cq-[16px] leading-fluid-cq-[24px] mt-4">
      Are you sure you want to proceed?
    </p>
    <div class="flex gap-4 mt-6">
      <button class="w-fluid-cq-[120px] text-fluid-cq-[14px]">
        Cancel
      </button>
      <button class="w-fluid-cq-[120px] text-fluid-cq-[14px]">
        Confirm
      </button>
    </div>
  </div>
</div>

Responsive Card

<div class="@container">
  <div class="@container w-fluid-cq-[320px] bg-white rounded-lg overflow-hidden">
    <img src="..." class="w-full h-fluid-cq-[200px] object-cover" alt="">
    <div class="p-fluid-cq-[16px]">
      <h3 class="text-fluid-cq-[20px] leading-fluid-cq-[28px] font-bold">
        Card Title
      </h3>
      <p class="text-fluid-cq-[14px] leading-fluid-cq-[20px] text-gray-600">
        Description text that adapts to card size
      </p>
    </div>
  </div>
</div>

API Reference

Viewport-based Utilities

Respond to viewport/window size.

| Utility | Scales With | Min | Max | Use Case | |---------|------------|-----|-----|----------| | w-fluid-[value] | 100vw | 88% | 120% | Responsive widths | | h-fluid-[value] | 100vh | 88% | 120% | Responsive heights | | max-w-fluid-[value] | 100vw | 88% | 120% | Container max-widths | | max-h-fluid-[value] | 100vh | 88% | 120% | Container max-heights | | text-fluid-[value] | 100vw | 88% | 120% | Responsive font-size | | leading-fluid-[value] | 100vw | 88% | 120% | Responsive line-height |

Container Query Utilities

Respond to parent container size.

| Utility | Scales With | Behavior | |---------|------------|----------| | w-fluid-cq-[value] | Container width | Adapts to parent | | h-fluid-cq-[value] | Container height | Adapts to parent | | max-w-fluid-cq-[value] | Container width | Adapts to parent | | max-h-fluid-cq-[value] | Container height | Adapts to parent | | text-fluid-cq-[value] | Container width | Adapts to parent | | leading-fluid-cq-[value] | Container width | Adapts to parent |

When to Use What

Viewport-based (-fluid-*)

Use when elements should respond to the viewport/window size:

• Global typography scales
• Full-width hero sections
• Page-level layouts
• Elements that adapt to screen size

Container Query-based (-fluid-cq-*)

Use when elements should respond to their container:

• Modular components (cards, widgets, panels)
• Sidebars and navigation
• Grid/flex items
• Reusable components that work in any context

Example Comparison

<!-- Viewport-based: Always relative to screen size -->
<h1 class="text-fluid-[48px]">
  Same size everywhere on the page
</h1>

<!-- Container-based: Relative to parent container -->
<div class="@container w-[400px]">
  <h1 class="text-fluid-cq-[48px]">
    Adapts to 400px container
  </h1>
</div>

<div class="@container w-[800px]">
  <h1 class="text-fluid-cq-[48px]">
    Adapts to 800px container (different size!)
  </h1>
</div>

How the Math Works

Each fluid utility uses this formula:

clamp(
  var(--min),  /* Base value × 0.88 */
  calc(var(--min) + (var(--max) - var(--min)) * (100vw - var(--vw-min)) / (100vw - var(--vw-min))),
  var(--max)   /* Base value × 1.2 */
)

Example Calculation for w-fluid-[500px]

• Min: 500px × 0.88 = 440px
• Max: 500px × 1.2 = 600px
• Range: 600px - 440px = 160px (36% flexibility)
• Preferred: Scales linearly from min to max as viewport grows

On a 375px mobile screen: ≈ 450px On a 768px tablet: ≈ 520px On a 1920px desktop: ≈ 600px (max)

Browser Support

• Chrome/Edge 105+
• Firefox 110+
• Safari 16+

Container queries require modern browser support. Check caniuse.com for details.

Requirements

• Tailwind CSS v4.0.0 or higher

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © ThanatosArtCoder

Links

• npm package
• GitHub repository
• Report issues

Related

• Tailwind CSS
• CSS Container Queries
• CSS clamp()