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.

Coccid

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.

Coccid

This method doesn't allow changing the values inside the clamp – Gilliette

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>

Gilliette

Answer 3

It's not particularly pretty, but you can give text- an arbitrary value and it will be used for font-size:

<div class="text-[clamp(1.25rem,3cqw,3rem)]">
  Just make sure to not have any spaces in the classname
</div>

---

You could also write a small plugin to make this a bit nicer to look at.

tailwind.config.js:

const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    // ...
    plugin(({matchUtilities, theme}) => {
      matchUtilities(
        {
          clamp(value) {
            // load font sizes from theme
            const sizes = theme('fontSize');

            // parse the value passed in from class name
            // split it by "-" and compare pieces to fontSize values
            const split = value
              .split('-')
              .map(v => sizes[v] ? sizes[v]['0'] : v);
            
            // return a clamped font-size
            return {
              fontSize: `clamp(${split[0]}, ${split[1]}, ${split[2]})`,
            }
          }
        }
      );
    }),
  ]
}

Then use it as class like this:

<div class="clamp-[xl-3cqw-5xl]">
  still not beautiful, but nicer. 
</div>

Here's a fork of the code-sandbox previously mentioned.

Bullins

Answer 4

Tailwind doesn’t offer a direct clamp() utility for font sizes, but you can use arbitrary values like this:

<p class="[font-size:_clamp(24px,12vw,30rem)]">Your Text</p>

Or with the text-[ ] utility:

<p class="text-[clamp(24px,12vw,30rem)]">Your Text</p>

This lets you easily control responsive font sizes.

Inhumanity