Tailwind CSS Clamp Calculator

Generate responsive clamp() values for Tailwind CSS

'4': 'clamp(0.5rem, 0.83vw, 1rem)'

Configuration

Multiple Values Mode

Enter single min and max values

Min Class Number (e.g., 2 for p-2)

0.5rem = 8px

Max Class Number (e.g., 4 for p-4)

1rem = 16px

Property Type

Target Screen Width (when max value is reached)

The screen width where the value reaches its maximum (16px)

Calculated Values

Tailwind Config Code

Copy this into your tailwind.config.js:

// In tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
         '4': 'clamp(0.5rem, 1.25vw, 1rem)',         // Target 1280px => p-2 to p-4 = (0.5rem to 1rem) = (8px to 16px)
      },
    },
  },
}

Example Usage

After adding to your config, use it like this:

<div className="p-4">Padding scales from 8px to 16px</div>

⚠️ Important:

After modifying tailwind.config.js, restart your development server for changes to take effect.

How it works

Tailwind uses a base unit of 0.25rem (4px), so p-2 = 0.5rem = 8px
The clamp() function provides: minimum, preferred (viewport-based), and maximum values
The vw unit (viewport width) makes values scale with screen size: 1vw = 1% of screen width
The calculator determines the vw value needed to reach your max size at your target screen width
On screens smaller than your target, the value scales between min and max
On screens larger than your target, the value stays at the maximum