Installation

Step 1: Install the Package

Install the plugin using npm, yarn, pnpm, or bun:

npm install @gladeye/tailwind-fluid-plugin

Step 2: Configure the Plugin

In your globals.css (or your main CSS file), add the plugin import and configure the theme variables:

@import "tailwindcss";
@plugin "@gladeye/tailwind-fluid-plugin";
@theme {
  /* the Figma design for the smallest screen size */
  --breakpoint-design-min: 320px;
  /* the Figma design for the largest screen size */
  --breakpoint-design-max: 1320px;
  /* the Figma design for the smallest container size */
  --breakpoint-c-min: 2rem;
  /* the Figma design for the largest container size */
  --breakpoint-c-max: 10rem;
  /* the smallest breakpoint to which the fluid scaling scales to */
  --breakpoint-clamp-min: 320px;
  /* the largest breakpoint to which the fluid scaling scales to */
  --breakpoint-clamp-max: 1680px;
}

Theme Configuration

The @theme section allows you to configure the breakpoints for fluid scaling:

• --breakpoint-design-min: The smallest viewport size (default: 320px)
• --breakpoint-design-max: The largest viewport size (default: 1320px)
• --breakpoint-c-min: The smallest container size (default: 2rem)
• --breakpoint-c-max: The largest container size (default: 10rem)
• --breakpoint-clamp-min: The smallest breakpoint to which the fluid scaling scales to (default: 320px)
• --breakpoint-clamp-max: The largest breakpoint to which the fluid scaling scales to (default: 1320px)

Adjust these values to match your design system's breakpoints.

Optional: Custom Fluid Variables

You can define custom fluid scaling variables in your @theme section that will be automatically calculated and available throughout your application:

@theme {
  /* Define the breakpoints for your fluid variable, if omitted it will default to --breakpoint-design-min/max values */
  --fluid-site-gutter-breakpoint-design-min: 320px;
  --fluid-site-gutter-breakpoint-design-max: 1320px;
  /* Define the fluid scaling clamp breakpoints for your fluid variable, if omitted it will default to --breakpoint-clamp-min/max values */
  --fluid-site-gutter-breakpoint-clamp-min: 320px;
  --fluid-site-gutter-breakpoint-clamp-max: 1680px;
  /* Define the values for your fluid variable */
  --fluid-site-gutter-value-min: 16px;
  --fluid-site-gutter-value-max: 24px;
  /* Adding them to the "spacing" namespace makes "sgs" available for utility classes, e.g "ml-sgs */
  --spacing-sgs: var(--fluid-site-gutter);
}

The plugin will automatically calculate the fluid scaling and create a CSS variable named --fluid-{name} that you can reference.

Naming Convention

For custom fluid variables, use the following naming convention:

• --fluid-{name}-breakpoint-design-min: The breakpoint for when the minimum value should be applied (optional, defaults to --breakpoint-design-min)
• --fluid-{name}-breakpoint-design-max: The breakpoint for when the maximum value should be applied (optional, defaults to --breakpoint-design-max)
• --fluid-{name}-breakpoint-clamp-min: The smallest breakpoint to which the fluid scaling scales to (optional, defaults to --breakpoint-clamp-min)
• --fluid-{name}-breakpoint-clamp-max: The largest breakpoint to which the fluid scaling scales to (optional, defaults to --breakpoint-clamp-max)
• --fluid-{name}-value-min: The value at design min (required)
• --fluid-{name}-value-max: The value at design max (required)

The resulting fluid variable will be available as --fluid-{name}.

Next Steps

Once installed and configured, you can start using fluid scaling utilities in your project. Check out the Usage guide to learn how to use the plugin.