Tailwind CSS Clamp Calculator

Generate responsive clamp() values for Tailwind CSS

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

Configuration

Property Type

Target Screen Width (when max value is reached)

Scaling Min and Max values in REM (one per line)

Format: key: min rem, max rem (e.g., "4: 0.625, 1.000" for p-4). Lines starting with # are ignored as comments.

Calculated Values (8 entries)

Tailwind Config Code

Copy this into your tailwind.config.js:

// In tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
           '4': 'clamp(0.625rem, 1.25vw, 1rem)',       // Target 1280px => p-4 = (0.625rem to 1rem) = (10px to 16px)
           '6': 'clamp(1.125rem, 1.88vw, 1.5rem)',     // Target 1280px => p-6 = (1.125rem to 1.5rem) = (18px to 24px)
           '8': 'clamp(1.625rem, 2.50vw, 2rem)',       // Target 1280px => p-8 = (1.625rem to 2rem) = (26px to 32px)
          '10': 'clamp(2.125rem, 3.13vw, 2.5rem)',     // Target 1280px => p-10 = (2.125rem to 2.5rem) = (34px to 40px)
          '12': 'clamp(2.625rem, 3.75vw, 3rem)',       // Target 1280px => p-12 = (2.625rem to 3rem) = (42px to 48px)
          '14': 'clamp(2.875rem, 4.38vw, 3.5rem)',     // Target 1280px => p-14 = (2.875rem to 3.5rem) = (46px to 56px)
          '16': 'clamp(3.25rem, 5.00vw, 4rem)',        // Target 1280px => p-16 = (3.25rem to 4rem) = (52px to 64px)
          '20': 'clamp(3.75rem, 6.25vw, 5rem)',        // Target 1280px => p-20 = (3.75rem to 5rem) = (60px to 80px)
      },
    },
  },
}

Example Usage

After adding to your config, use it like this:

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

<div className="p-6">Padding scales from 18px to 24px</div>

<div className="p-8">Padding scales from 26px to 32px</div>

<div className="p-10">Padding scales from 34px to 40px</div>

<div className="p-12">Padding scales from 42px to 48px</div>

<div className="p-14">Padding scales from 46px to 56px</div>

<div className="p-16">Padding scales from 52px to 64px</div>

<div className="p-20">Padding scales from 60px to 80px</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