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+Cto 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
pxandrem— values convert automatically - Insert or copy — Insert directly into your editor or copy to clipboard
- Mixed units — Input sizes and viewports independently in
pxorrem
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:
| Field | Description |
|---|---|
| Min Size / Max Size | Fluid value range |
| Min Viewport / Max Viewport | Viewport breakpoints |
| Output Unit | Output in rem or px |
| Output Format | CSS or Tailwind syntax |
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
| Action | Shortcut |
|---|---|
| Open Clamp Calculator | Ctrl+Alt+C |
| Open sidebar | Click icon in Activity Bar |
| Command palette | Ctrl+Shift+P → $clamp |
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+Cshortcut - 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