Build better responsive designs in less code.

Tailwind’s default theme

Tailwind v3’s default breakpoints are in px, while its default spacing and font sizes are in rem. This doesn’t bode well with the CSS restrictions mentioned above, so fluid-tailwind provides rem replacements for the default breakpoints:

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

export default {
  // ...
  theme: {
    screens
  },
  // ...
}

Similarly, the line heights used for Tailwind’s default font sizes 5xl–9xl are unitless, which can’t be fluidized. fluid-tailwind provides rem replacements for those as well:

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

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

Custom default breakpoints

The default start/end breakpoints can be set with a tuple of length literals [start, end]. Either can be omitted, in which case the plugin will use your smallest and largest breakpoint, respectively.

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

Customize breakpoints per-utility

You can customize the start/end breakpoints for a fluid utility with the included ~ variant. For example:

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

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

<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">

Negative values

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

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

Container queries

If you have the official container query plugin installed, you can make fluid utilities scale between the nearest @container widths rather than screen breakpoints by using the ~@ variant:

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

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

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

// ...
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 media queries

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

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

Here’s how this works:

1. We scale our font-size between base and 4xl between our smallest and md breakpoints
2. We scale in the opposite direction between our lg and largest breakpoints

Using with a custom prefix or separator

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

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

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

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

tailwind-merge

fluid-tailwind officially supports tailwind-merge via a plugin:

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

For best results, include it after any other tailwind-merge plugins:

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

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