Smoother responsive styles in less code.

Features

• Supports every utility out of the box (including plugins)
• Full Intellisense support
• Ensures fluid type meets accessibility requirements
• Flexible enough to handle advanced use cases

Installation

1. Install the package

   Install fluid-tailwind via npm.

   npm install -D fluid-tailwind

2. Add the plugin and extractor

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

   import fluid, { extract } from 'fluid-tailwind'
   
   export default {
     content: {
       files: [/* ... */],
       extract
     },
     // ...
     plugins: [
       fluid
     ]
   }

3. Convert Tailwind’s default screens to rem

   You can skip this if you override Tailwind’s default screens or use tw-reset

   This will be unnecessary in Tailwind v4.

   import fluid, { extract, screens } from 'fluid-tailwind'
   
   export default {
     // ...
     theme: {
       screens
     },
     // ...
   }

Basic usage

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

Fluid button

Here’s a quick overview:

• The ~ modifier 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

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

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

Using expressions like calc()

Trying to interpolate between non-lengths like colors

Tailwind’s default large font sizes

Tailwind’s default font sizes 5xl – 9xl use unitless line heights that can’t be fluidized. If you want to use these values fluidly, you can convert them to rem with the built-in fontSize export:

import




    
 fluid, { extract, fontSize } from 'fluid-tailwind'

export default {
  // ...
  theme: {
    fontSize,
    extend: {
      fontSize: {
        // ...
      }
    }
  },
  // ...
}

Configuration

Custom 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.

// ...
export default {
  // ...
  theme: {
    /** @type {import('fluid-tailwind').FluidThemeConfig} */
    fluid: ({ theme }) => ({
      defaultScreens: ['20rem', theme('screens.lg')]
    })
  },
  // ...
}

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

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

Set start screen to md , end screen as default

Set end screen to lg , start screen as default

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

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

Negative values

To negate fluid utilities, the dash comes after the fluid ~ modifier:

Negating a fluid utility

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:

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 ~ modifier, 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

Custom 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.

// ...
export default {
  // ...
  theme: {
    /** @type {import('fluid-tailwind').FluidThemeConfig} */
    fluid: ({ theme }) => ({
      defaultContainers: [, theme('containers.2xl')]
    })
  },
  // ...
}

Fluid type accessibility errors

By default, the plugin will not generate fluid type that would fail WCAG Success Criterion 1.4.4 . You can configure this with the checkSC144 option:

// ...
export default {
  // ...
  plugins: [
    fluid({
      checkSC144: false // default: true
    })
  ]
}

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!

Here’s how this works:

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