Tailwind Clamp Plugin

A Tailwind CSS plugin that provides utilities for clamp-based responsive design.

Floor and Ceiling Assumptions

Scaling between 375px (mobile) and 3840px (4K) with a base text of 16px/1rem

Installation & Setup

First, install the plugin via npm:

npm install futureman-tailwind-clamp-plugin

For tailwind V4 Add the plugin to your css file

@import 'tailwindcss';
@plugin 'futureman-tailwind-clamp-plugin';

For tailwind V3 Add the plugin to your tailwind.config file

module.exports = {
  // Other configuration...
  plugins: [
    require('futureman-tailwind-clamp-plugin'),
    // other plugins
  ],
};

Example Code

<div class="p-c-[1rem,2rem] mt-c-[10px,20px] text-c-[24px,36px,1.5,1.2]">
  Responsive element with clamped padding, margin, and font-size.
</div>

// Usage For padding - default in px
p-c-[20,40]
p-c-[20px,40px]
p-c-[20rem,40rem]
p-c-[40px,200]

// Usage For Text - font size and line height
text-c-[24px,96px]
text-c-[24,96]
text-c-[2rem,5rem]
text-c-[24,36,1.5,1.2]
text-c-[24px,36px,1.5,1.2]
text-c-[2rem,4rem,2,1.5]

Supported Utilities

This plugin provides clamp versions of various Tailwind CSS utilities. Here is a list of all supported utilities:

Padding

• p-c: clamp padding for all sides
• pt-c: clamp padding-top
• pr-c: clamp padding-right
• pb-c: clamp padding-bottom
• pl-c: clamp padding-left
• px-c: clamp padding-left and padding-right
• py-c: clamp padding-top and padding-bottom

Margin

• m-c: clamp margin for all sides
• mt-c: clamp margin-top
• mr-c: clamp margin-right
• mb-c: clamp margin-bottom
• ml-c: clamp margin-left
• mx-c: clamp margin-left and margin-right
• my-c: clamp margin-top and margin-bottom

Font Size

• text-c: clamp font-size and line-height

Letter Spacing

• tracking-c: clamp letter-spacing

Width & Height

• w-c: clamp width
• h-c: clamp height
• size-c: clamp width and height
• min-w-c: clamp min-width
• min-h-c: clamp min-height
• max-w-c: clamp max-width
• max-h-c: clamp max-height

Gap

• gap-c: clamp gap
• gap-x-c: clamp row-gap
• gap-y-c: clamp column-gap

Position

• left-c: clamp left
• top-c: clamp top
• right-c: clamp right
• bottom-c: clamp bottom

Border Radius

• rounded-c: clamp border-radius