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

``bash
npm install tailwind-elasticss
`

Usage

Add the plugin to your CSS file:

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

Quick Start

`html

Fluid width

Fluid heading

`

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

$3

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

$3

Width that scales smoothly with viewport width.

`html

Responsive width

Width in rems

Percentage-based

`

Generated CSS for w-fluid-[500px]:
`css
width: clamp(440px, / fluid calculation /, 600px);
`

$3

Height that scales smoothly with viewport height.

`html

Responsive height

Hero section

`

Generated CSS for h-fluid-[300px]:
`css
height: clamp(264px, / fluid calculation /, 360px);
`

$3

Fluid maximum dimensions.

`html

Article content

Scrollable content

`

---

Typography Utilities

$3

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

`html

Display Heading

Body text that's always readable

Fine print

`

Generated CSS for text-fluid-[32px]:
`css
font-size: clamp(28.16px, / fluid calculation /, 38.4px);
`

$3

Line height that scales proportionally with font size.

`html

Heading with proportional line height

Paragraph with optimal readability

`

Generated CSS for leading-fluid-[24px]:
`css
line-height: clamp(21.12px, / fluid calculation /, 28.8px);
`

$3

`html

Display

Heading 1

Heading 2

Heading 3

Body text

Small text

`

---

Container Queries

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

Requires @container on parent element.

`html

Container-aware width

Container-aware heading

`

$3

`html

Main content

`

$3

`html

Card Title

Text that scales with card size

`

---

Customization

$3

Every fluid utility exposes CSS variables you can customize:

`html

`

$3

`html

Scales from 43.2px to 55.2px

Scales from 28.8px to 36.8px

Scales from 14.4px to 18.4px

`

$3

| 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

$3

`html

Welcome to Our Site

Subtitle that scales perfectly

`

$3

`html

Article Title

Published on Jan 1, 2025

Article content that maintains perfect readability
at any container size.

`

$3

`html

Total Users

12,345

Revenue

$45,678

Growth

+23%

`

$3

`html

Confirm Action

Are you sure you want to proceed?

Cancel


Confirm

`

$3

`html

Card Title

Description text that adapts to card size

`

---

API Reference

$3

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 |

$3

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

$3

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

$3

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

$3

`html

Same size everywhere on the page

Adapts to 400px container

Adapts to 800px container (different size!)

`

---

How the Math Works

Each fluid utility uses this formula:

`css
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 /
)
`

$3

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