Futureman Tailwind Clamp Spacing

Futureman specific tailwind spacing classes

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-spacing

For Tailwind V4 Add import to your css theme

@import 'futureman-tailwind-clamp-spacing/futuremanClampSpacingTheme.css';

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

const futuremanClampSpacing = require("futureman-tailwind-clamp-spacing");

export default {
    // other config items
    theme: {
        extend: {
            spacing: {
                ...futuremanClampSpacing,

                //add site specific override/additions here
                om: "clamp(2rem, 1.7565rem + 1.039vw, 4.25rem)",
                gutter: "clamp(1rem, 0.7565rem + 1.039vw, 3.25rem)",
                gutterHalf: "clamp(0.5rem, 0.3782rem + 0.5195vi, 1.625rem)",
            },
        },
    },
};

Values

For values and visual example, view the following Futureman Digital Fluid Scale Figma File

Usage Examples

Spacing can be used on many tailwind utilities (p, m, top, gap, etc..)

<div class="pt-fm-3xl ml-fm-md-high gap-fm-sm-low">
</div>