Package Exports

tailwind-elasticss
tailwind-elasticss/index.css

Readme

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>

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>

<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>

<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.