Font sizes and screens

Use the CSS class text-fluid, optionally in combination with a text-from-* class and/or a text-to-* class.

Make font size fluid

Add .text-fluid to enable fluid font-size. On its own, it makes font-size

• the default "from" font-size (.text-base) when the window is narrower than the default "from" screen (screen sm)

• fluidly increase font size as window width increases, from default "from" font size (.text-base) at default "from" screen (screen sm) to default "to" font size (.text-xl) at default "to" screen (screen 2xl)

• the default "to" font-size (.text-xl) when the window is wider than the default "to" screen (screen 2xl)

The default font sizes and screens can be configured — see Customizing: Options.

<div class="text-fluid"></div>

This sentence is .text-base on screens narrower than sm, .text-xl on screens wider than 2xl, and fluid in between.

Fallbacks

If your theme doesn't have a sm screen, the default Tailwind theme's sm screen will be used; same for the 2xl screen, and the base and xl font font sizes.

Specify font sizes

text-to-<fontSize> and text-from-<fontSize> classes change the font size(s). <fontSize> is a Tailwind font size key.

Out of the box, you can use all those of your theme.fontSizes which have a pixel or rem font-size (for example '10px', ['4rem', …]). (Pixel values will be converted to rems.)

You can also configure additional values — see Customizing: Font sizes and screens.

Accessibility Risk

Not all fluid font sizes are accessible. Maxwell Barvian's article Addressing Accessibility Concerns With Using Fluid Type goes into details.

In the following example, the "from" font size is sm and the "to" font size is 2xl:

<div class="text-fluid text-from-sm text-to-2xl">…</div>

This sentence is .text-sm on screens narrower than sm, .text-2xl on screens wider than 2xl, and fluid in between.

Specify screens

text-to-@<screen> and text-from-@<screen> classes change the screen(s). <screen> is a Tailwind screen key.

Out of the box, you can use all those of your theme.screenss which are a pixel or rem breakpoint (e.g. '470px' or '47rem'), or a min-width or max-width breakpoint (e.g. { min: '470px' }, { min: '47rem' }, { max: '740px' }, or { max: '74rem' }). (Pixel values will be converted to rems.) You can also configure additional values — see Customizing: Font sizes and screens.

In the following example, the "from" font size is the default (font size base), the "from" screen is md, the "to" font size is the default (font size 2xl) and the "to" screen is xl:

<div class="text-fluid text-from-@md text-to-@xl">…</div>

This sentence is .text-base on screens narrower than md, .text-2xl on screens wider than xl, and fluid in between.

Specify font sizes and screens

text-to-<fontSize>@<screen> and text-from-<fontSize>@<screen> classes change the font size(s) and screen(s).

See above for limitations and requirements of <fontSize>s and <screen>s.

In the following example, the "from" font size is sm, the "from" screen is screen md, the "to" font size is lg, and the "to" screen is screen xl:

<div class="text-fluid text-from-sm@md text-to-lg@xl">…</div>

This sentence is .text-base on screens narrower than sm, .text-lg on screens wider than xl, and fluid in between.

Change relationship

The "from" <fontSize> can be bigger than the "to" <fontSize>. You can make font size decrease as the relative unit increases.

<div class="text-fluid text-from-2xl text-to-base">…</div>

This sentence is .text-2xl on screens narrower than sm, .text-base on screens wider than 2xl, and fluid in between.

Inheritance

Nesting works. Use .text-fluid to re-enable an ancestor's fluid font size.

<div class="text-fluid text-from-xl text-to-4xl">
  Fluid

  <div class="text-base">
    Not fluid

    <div class="text-fluid">Fluid</div>
  </div>
</div>

Fluid

Not fluid

Fluid

Responsive design

Specify stop positions with standard Tailwind responsive design.

<div class="text-fluid text-from-base@md text-to-3xl@lg lg:text-from-3xl@lg lg:text-to-base@xl">…</div>

This sentence is .text-base on screens narrower than md, .text-base on screens wider than xl, and fluid in between passing through .text-3xl at screen lg.