Fluid for Tailwind CSS

Features

Supports all core plugins out of the box (i.e. font size, margin, padding, width)
Full Intellisense support
Ensures all fluid type meets accessibility requirements
Comes with a fluidize method to add fluid versions of any custom plugin
Flexible enough to handle advanced use cases

Installation

Install the package
Install fluid-tailwind via npm.
Terminal window
```
npm install -D fluid-tailwind
```

Add the extractor

The custom extractor lets you use the new ~ prefix in your Tailwind classes.

import { fluidExtractor } from 'fluid-tailwind'

export default {
  content: {
    files: [/* ... */],
    extract: fluidExtractor()
  },
  // ...
}

Add the fluid core plugins

Add fluid versions of every enabled core plugin.

import { fluidExtractor, fluidCorePlugins } from 'fluid-tailwind'

export default {
  // ...
  plugins: [
    fluidCorePlugins
  ]
}

(Optional) Use `rem` screens and font sizes

If you’re using Tailwind’s default fontSize and screens, you can convert them to rem to ensure greater compatibility with core plugins.

This will be unnecessary in Tailwind v4

import { fluidExtractor, fluidCorePlugins, defaultThemeScreensInRems, defaultThemeFontSizeInRems } from 'fluid-tailwind'

export default {
  // ...
  theme: {
    fontSize: defaultThemeFontSizeInRems,
    screens: defaultThemeScreensInRems,
    extend: {
      fontSize: {
        // ...
      }
    }
  }
}

Basic usage

Your browser isn't wide enough to see the full effect

<button class="bg-sky-500 ~px-4/8 ~py-2/4 ~text-sm/xl ...">Fluid button</button>

Here’s a quick overview:

The ~ prefix makes a utility fluid
Fluid utilities have a start and end value, separated by a /
Fluid utilities interpolate between their start and end value when the viewport is between the start and end point, respectively
The start and end points default to the smallest and largest screen, but they can be customized or overridden per-utility

Limitations

All lengths must have the same unit

Due to CSS restrictions, fluid expressions can only be computed if all involved lengths have the same unit. This includes:

Start value / end value
Start point / end point

Trying to interpolate between two different units

<h1 class="~text-[1rem]/[24px]">

Trying to set font-size in rem when the screens are in px

<h1 class="~text-lg/xl">

export default {
  // ...
  theme: {
    screens: {
      'sm': '320px',
      '2xl': '1280px'
    },
    fontSize: {
      'lg': '1.5rem',
      'xl': '2rem'
    }
  }
}

Using expressions like calc()

<h1 class="~text-base/[calc(1.5rem-2px)]">

Trying to interpolate between non-lengths like colors

<h1 class="~text-white/red-500">

Negative values

You can’t use the dash prefix - to negate fluid utilities like you can with i.e. -mt-3, because Tailwind would only negate the start value.

Trying to use - to negate a fluid utility

<div class="-~mt-3/5">

Configuration

Customizing default screens

The default start and end screens can be set with a tuple [start, end], where each value is a simple screen width. Either value can be omitted, in which case the plugin will use your smallest and largest screen, respectively.

import { ..., type FluidConfig } from 'fluid-tailwind'

export default {
  theme: {
    fluid: {
      defaultScreens: ['20rem', '64rem']
    } satisfies FluidConfig
  }
}

Advanced

Customize screens per-utility

You can change the start/end screens for an individual fluid utility with the included ~ variant. For example:

Your browser isn't wide enough to see the full effect

Quick increase

<h1 class="~md/lg:~text-base/4xl">Quick increase</h1>

You can omit either start or end screen to use your global defaults:

Set start screen to md, end screen as default

<div class="~md:~text-base/4xl">

Set end screen to lg, start screen as default

<div class="~/lg:~text-base/4xl">

Arbitrary start screens

If you want to set an arbitrary start screen with the ~ variant, you have to use ~min-[] (just as you’d have to use min-[] to set an arbitrary screen breakpoint):

Trying to use ~[]: to set an arbitrary start screen

<div class="~[20rem]/lg:~text-base/4xl">

Using ~min-[] to set an arbitrary start screen

<div class="~min-[20rem]/lg:~text-base/4xl">

Container queries

If you have the official container query plugin installed, you can make the start/end points relative to the nearest @container rather than the viewport by using the ~@ variant:

<h1 class="~@md/lg:~text-base/4xl">Relative to container</h1>

This may look confusing if you use named containers. Sorry about that; there’s only so many ways to get values into Tailwind. In general, when you see the fluid ~ prefix, you know the / denotes a start/end pair.

Just like the ~ variant, both start and end containers are optional and will use your global defaults if unset.

Set end container to lg, start container as default

<div class="~@/lg:~text-base/4xl">

Trying to reference named containers

<div class="@container/main">
  <h1 class="~@/3xl/main:~text-lg/base">

Browser support for named containers in fluid CSS expressions should arrive soon

Customizing default containers

The default containers can be set in the same way as screens. Either value can be omitted, in which case the plugin will use your smallest and largest container, respectively.

import { ..., type FluidConfig } from 'fluid-tailwind'

export default {
  theme: {
    fluid: {
      defaultContainers: [, '30rem']
    } satisfies FluidConfig
  }
}

Fluidize other plugins

When adding custom plugins to your tailwind.config.js, you can run them through the fluidize function to automatically add fluid versions of all their utilities and components:

import { ..., fluidize } from 'fluid-tailwind'
import myFavoritePlugin from '...'

export default {
  // ...
  plugins: [
    fluidize(myFavoritePlugin)
    // ...
  ]
}

Combining with breakpoints

To really get crazy, you can combine fluid values with container or media queries, as such:

Your browser isn't wide enough to see the full effect

Whoa!

<h1 class="~/md:~text-base/4xl lg:~lg:~text-4xl/base">Whoa!</h1>

Here’s how this works:

By default, we interpolate our font-size between base and 4xl until the viewport is our md screen
When we get to our lg screen, we interpolate between the opposite 4xl and base, starting when the viewport is our lg screen

Custom prefix and/or separator

If you’re using a custom separator or prefix in your Tailwind config, you’ll need to pass them in to the custom extractor as well:

import { fluidExtractor } from 'fluid-tailwind'

export default {
  content: {
    files: [/* ... */],
    extract: fluidExtractor({
      prefix: 'tw-',
      separator: '_'
    })
  },
  prefix: 'tw-',
  separator: '_',
  // ...
}

Use a custom prefix with fluid type

<div class="tw-~text-sm/xl">

Features

Installation

Install the package

Add the extractor

Add the fluid core plugins

(Optional) Use rem screens and font sizes

Basic usage

Limitations

All lengths must have the same unit

Negative values

Configuration

Customizing default screens

Advanced

Customize screens per-utility

Arbitrary start screens

Container queries

Customizing default containers

Fluidize other plugins

Combining with breakpoints

Custom prefix and/or separator

(Optional) Use `rem` screens and font sizes