Build better responsive designs in less code.

Features

• Works with every utility (including other plugins)
• Full IntelliSense support
• First-class tailwind-merge 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. Note the object format for content.

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

3. Use rem-based screens and fontSize

   See the limitations section for more information.

   import fluid, { extract, screens, fontSize } from 'fluid-tailwind'
   
   export default {
     // ...
     theme: {
       screens, // Tailwind's default screens, in `rem`
       fontSize, // Tailwind's default font sizes, in `rem` (including line heights)
       extend: {
         screens: {
           xs: '20rem'
         }
       }
     },
     // ...
   }

Basic usage

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

Here’s a quick overview:

• The ~ modifier makes a utility fluid
• Fluid utilities scale between their start/end values when the viewport is between the start and end breakpoints
• The start and end breakpoints default to the smallest and largest screen, but they can be customized or overridden per-utility

Configuration

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

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

Advanced

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

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

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

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

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

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

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

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

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

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

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

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

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

Integrations

npm install --save @fluid-tailwind/tailwind-merge

import { extendTailwindMerge } from 'tailwind-merge'
import { withFluid } from '@fluid-tailwind/tailwind-merge'

export const twMerge = extendTailwindMerge(/* ... */, withFluid)

Limitations

Due to CSS restrictions, fluid utilities require the start/end values and breakpoints to be length literals (i.e. 1rem) with the same unit.

<h1 class="~p-[1rem]/[18px]">

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

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

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

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

Troubleshooting

Tailwind doesn’t currently provide any error reporting tools for plugins, so if a fluid utility fails, it will output an empty rule with a comment containing the reason:

.\~mt-\[10px\]\/\[1\.5rem\] /* error - Start `10px` and end `1.5rem` units don't match */ {}

You should be able to see this if you have the official IntelliSense plugin installed and hover over the class. Otherwise, you can see it if you click the location for the empty rule in your browser’s inspector.