@gladeye/tailwind-fluid-plugin

Tailwind CSS Fluid Scaling Plugin

A Tailwind CSS plugin that enables fluid scaling using CSS clamp(). This plugin creates smooth transitions between different viewport sizes for properties like spacing, typography, and dimensions.

Demo

https://gladeye-tailwind-fluid-plugin.vercel.app/

Viewport-Based Fluid Scaling

Use the -fluid-[] modifier with supported properties to create smooth scaling between breakpoints:

<div class="pt-fluid-[sm=1,md=2,lg=4,xl=8]">
  <!-- Padding-top scales smoothly between breakpoints -->
</div>

Container Query-Based Fluid Scaling

The plugin also supports container queries using the @ prefix to specify container sizes:

<!-- Define a container (named or not) -->
<div class="@container/main">
  <!-- Element that scales based on container size -->
  <div class="h-fluid-[@container/main,@3xs=100px,@3xl=400px]">
    <!-- Height scales smoothly between container sizes -->
  </div>
</div>

Usage

The plugin provides fluid scaling utilities in the format: {property}-fluid-[breakpoints]

Syntax

Viewport Syntax

{property}-fluid-[breakpoint1=value1,breakpoint2=value2,...]
{property}-fluid-[value1,value2]

Container Syntax

{property}-fluid-[@containerName,breakpoint1=value1,breakpoint2=value2,...]
{property}-fluid-[@containerName,value1,value2]

Where:

• property is the CSS property to scale (see supported properties below)
• containerName is the name of the container to scale the property for. This is required for container query scaling.
• breakpoints are your defined screen/container sizes (sm, md, lg, etc.) if the breakpoint is omitted, the plugin will use the min/max breakpoints defined in the @theme section
• values can be Tailwind theme spacing values, explicit dimensions(px or rem)

Examples:

/* Using Tailwind spacing units */
<div className="mb-fluid-[4,6]"/>

/* Using pixel units */
<div className="mb-fluid-[10px,23px]"/>

/* Using rem units */
<div className="mb-fluid-[3rem,6rem]"/>

/*Using container query*/

<div className="@container">
  <div className="h-fluid-[@container,100px,300px]"/>
</div>

/* Using named container query */
<div className="@container/foo">
  <div className="h-fluid-[@container/foo,100px,300px]"/>
</div>

Demo

https://gladeye-tailwind-fluid-plugin.vercel.app/

Setup

In your globals.css add the following

@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;
}

Custom Fluid Scaling Variables

You can define custom fluid scaling variables in your @theme section that will be automatically calculated and available throughout your application. This is useful for values that need to scale fluidly but are used in multiple places.

@theme {
  /* Define the breakpoints for your fluid variable */
  --fluid-site-gutter-breakpoint-design-min: 320px;
  --fluid-site-gutter-breakpoint-design-max: 1320px;
  /* 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 between the min and max values
• Create a CSS variable named --fluid-{name} that you can reference
• Apply the fluid scaling based on the defined breakpoints

The naming convention for the theme variables is:

• --fluid-{name}-breakpoint-design-min: The minimum breakpoint
• --fluid-{name}-breakpoint-design-max: The maximum breakpoint
• --fluid-{name}-value-min: The minimum value
• --fluid-{name}-value-max: The maximum value

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

Supported Properties

Container and Screen Sizes

• container sizes
• screen sizes

Tailwind Properties

• inset
• top
• right
• bottom
• left
• w
• h
• max-w
• max-h
• text
• tracking
• space-x
• space-y
• opacity
• bg
• p
• pt
• pr
• pb
• pl
• px
• py
• m
• mt
• mr
• mb
• ml
• mx
• my
• gap
• gap-x
• gap-y

How It Works

The plugin calculates fluid values using CSS clamp() to create smooth transitions between breakpoints. For example, if you use:

<div class="mt-fluid-[sm=1,lg=4]"></div>

The plugin will:

• Convert the values to pixels
• Calculate the appropriate scaling ratio
• Generate a CSS clamp function that smoothly transitions between the values
• Apply the fluid scaling at the specified breakpoints

Browser Support

This plugin uses CSS clamp() which is supported in all modern browsers. For browser compatibility details, check Can I Use.