TailwindCSS Fluid Fonts

The TailwindCSS Fluid Fonts plugin offers a solution for managing fluid font sizes in your project. With an easy-to-use setup, this plugin perfectly suits your responsive design needs.

• Install
• Add plugin config
  • Viewport (Required)
  • Font Sizes (Required)
  • Unit (Optional: Default: "rem")

Install

Install tailwindcss-fluid-fonts with the npm package manager:

npm i -D tailwindcss-fluid-fonts

Import and add the plugin in your Tailwind Config:

import type { Config } from "tailwindcss";
import fluidFonts from "tailwindcss-fluid-fonts";

const config: Config = {
  plugins: [
    fluidFonts({
      viewport: {
        min: "375px",
        max: "1536px",
      },
    }),
  ],
};
export default config;

Add plugin config

Viewport (Required)

Represents a range of sizes that includes min and max size of viewport.

const config: Config = {
  plugins: [
    fluidFonts({
      viewport: {
        min: "375px",
        max: "1536px",
      },
    }),
  ],
};

Font Sizes (Required)

Add a name for the font size, and as a value, you can add an array with the following structure [minFontSize, maxFontsize, lineHeight]. The third value lineHeight is optional:

Example:

const config: Config = {
  plugins: [
    fluidFonts({
      fontSizes: {
        // Without lineHeight
        "3xl": ["24px", "33px"],
        // With lineHeight
        "4xl": ["27px", "36px", "1.6"],
      },
    }),
  ],
};

When using the classes text-3xl or text-4xl, they will apply the following CSS:

/** 3xl does not add lineHeight*/
.text-3xl {
  font-size: clamp(... /* Fluid size calc */);
}

/** 4xl adds lineHeight*/
.text-4xl {
  font-size: clamp(... /* Fluid size calc */);
  line-height: 1.6;
}

Or instead of using the array type [minFontSize, maxFontsize, lineHeight], you can use an object with the following options:

• min: minimum font size with its respective unit px or rem.
• max: maximum font size with its respective unit px or rem.
• lineHeight (Optional):additional option for line height.
• letterSpacing (Optional): additional option for letter spacing.
• fontWeight (Optional): additional option to define font weight.

Example:

const config: Config = {
  plugins: [
    fluidFonts({
      fontSizes: {
        "3xl": {
          min: "24px",
          max: "33px",
          lineHeight: "1.6",
          letterSpacing: "1px",
          fontWeight: "medium",
        },
        "4xl": {
          min: "27px",
          max: "36px",
          lineHeight: "1.6",
        },
      },
    }),
  ],
};

When using the classes text-3xl or text-4xl, they will apply the following CSS:

/** 3xl calculates font size using min and max values and adds the defined extra properties: lineHeight, letterSpacing, and fontWeight */
.text-3xl {
  font-size: clamp(... /* Fluid size calc */);
  line-height: 1.6;
  letter-spacing: 1px;
  font-weight: medium;
}

/** 4xl calculates font size using min and max values and adds the defined extra property: lineHeight */
.text-4xl {
  font-size: clamp(... /* Fluid size calc */);
  line-height: 1.6;
}

Unit (Optional: Default: "rem")

Unit used as output for font sizes can be px or rem:

Example:

If font size values (min and max) are defined in px and unit is defined in rem, the value of the font-size property in the CSS will be defined using rem;

const config: Config = {
  plugins: [
    fluidFonts({
      fontSizes: {
        "4xl": ["27px", "36px"],
      },
      viewport: {
        min: "375px",
        max: "1536px",
      },
      unit: "rem", //Default
    }),
  ],
};

Output if the unit is rem:

.text-4xl {
  font-size: clamp(
    1.6875rem,
    calc(1.6875rem + (2.25 - 1.6875) * ((100vw - 23.4375rem) / (96 - 23.4375))),
    2.25rem
  );
}

Output if the unit is px:

.text-4xl {
  /** The calc base value MUST be stated in REM to maintain accessibility */
  font-size: clamp(27px, calc(1.6875rem + (36 - 27) * ((100vw - 375px) / (1536 - 375))), 36px);
}

If font size values (min and max) are defined in rem and unit is defined in px, the value of the font-size property in the CSS will be defined using px;