How to clamp font size using TailwindCSS?

Question

How can the clamp() CSS function be used with TailwindCSS to make the fontSize linearly scale between a min and a max value?

Interested in particular about integrating with Next.js.

Answer 1

At the time of writing, TailwindCSS doesn't seem to support clamp() natively by default.

Search returns a use case on multi-line truncation using the line-clamp plugin, which is different from clamping font sizes.

Taking inspiration from this GitHub issue, using clamp() in TailwindCSS can be accomplished by extending the default theme. Example in a Next.js app:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontSize: {
        clamp: "clamp(1rem, 5vw, 3rem)",
      },
    },
  },
  plugins: [],
};

To use it in a jsx or tsx component, one can just pass text-clamp as an additional className.

Link to working codesandbox.

Answer 2

There is no Tailwind utility class to do this easily but you can do this by writing custom CSS with Arbitrary properties

Example:

<h1 class="[font-size:_clamp(2em,5vw,10em)]">Text</h1>