Tailwind CSS Fluid Scaling Plugin

Spacing

margin

margin

Utilities for controlling the margin of an element.

Basic example

Use m-fluid-[breakpoints] utilities like m-fluid-[4,8] and m-fluid-[14px,24px] to set the margin of an element.

JSX
<div className="size-max">
  <div className="m-fluid-[14px,24px] ..." />
</div>

Margin to a single side

Use mt-fluid-[breakpoints], mr-fluid-[breakpoints], mb-fluid-[breakpoints], and ml-fluid-[breakpoints] utilities to set the margin of an element to a single side.

A

B

C

D

JSX
<div className="...">
  <div className="size-max">
    <div className="ml-fluid-[14px,24px] ...">A</div>
  </div>
  <div className="size-max">
    <div className="mt-fluid-[14px,24px] ...">B</div>
  </div>
  <div className="size-max">
    <div className="mb-fluid-[14px,24px] ...">C</div>
  </div>
  <div className="size-max">
    <div className="mr-fluid-[14px,24px] ...">D</div>
  </div>
</div>

Margin X

Use mx-fluid-[breakpoints] utility to set the horizontal margin of an element.

JSX
<div className="size-max">
  <div className="mx-fluid-[14px,24px] ..." />
</div>

Margin Y

Use my-fluid-[breakpoints] utility to set the vertical margin of an element.

JSX
<div className="size-max">
  <div className="my-fluid-[14px,24px] ..." />
</div>

Follow us

Visit our website

© Gladeye 2026