Clamp Calculator — Fluid CSS clamp() Generator

A VS Code extension that generates fluid CSS clamp() values for responsive typography and layouts. Works with vanilla CSS and Tailwind CSS.

Features

• Quick calculator — Press Ctrl+Alt+C to open the calculator and enter two values
• Persistent sidebar — Configure viewport widths, units, and output format once — settings survive restarts
• Dual format output — Switch between CSS clamp() and Tailwind arbitrary value syntax with one click
• Real-time preview — See computed values at common viewport widths (320px, 768px, 1440px, etc.)
• Unit auto-conversion — Switch between px and rem — values convert automatically
• Insert or copy — Insert directly into your editor or copy to clipboard
• Mixed units — Input sizes and viewports independently in px or rem

Usage

Quick Calculator (Ctrl+Alt+C)

Press Ctrl+Alt+C anywhere in your editor. Enter Min Size and Max Size — the extension uses your sidebar configuration for viewport widths, units, and output format.

Ctrl+Alt+C
→ Minimum size (e.g., 16)
→ Maximum size (e.g., 24)
→ Result: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)
  [Insert] [Copy]

Sidebar

Open the Clamp Calculator view from the Activity Bar. Configure your defaults:

Changes save automatically and persist across VS Code restarts.

Command Palette

Press Ctrl+Shift+P and type Clamp Calculator to open the calculator from the command palette.

Output Formats

CSS

clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)

Tailwind

[clamp(1rem,0.8571rem+0.7143vw,1.5rem)]

Keyboard Shortcuts

Customize shortcuts in File → Preferences → Keyboard Shortcuts (Ctrl+K Ctrl+S).

Requirements

• VS Code 1.85.0 or higher

Extension Settings

This extension contributes the following settings via the sidebar (no manual configuration needed):

• Min/Max viewport widths and units
• Size units (px/rem)
• Output unit (px/rem)
• Output format (CSS/Tailwind)

Known Issues

• None reported yet. Open an issue if you find one.

Release Notes

0.0.1

Initial release:

• Fluid clamp() calculator with Ctrl+Alt+C shortcut
• Persistent sidebar configuration
• CSS and Tailwind output formats
• Real-time preview at common viewports
• Automatic unit conversion (px ↔ rem)

About

Built for responsive web developers who need reliable, repeatable fluid typography and layout values.

Repository: github.com/your-username/clamp-calculator