How to clamp font size using TailwindCSS?

Quick Fix: To use a clamped font size in TailwindCSS, you can extend the default theme with fontSize.clamp. Then, apply the text-clamp class to the text element you want to clamp the font size for.

The Problem:

In Tailwind CSS, I want to constrain the fontSize property within a minimum and maximum value using the clamp() CSS function. As I’m working in a Next.js environment, I’d like to know how to incorporate this functionality effectively.

The Solutions:

Solution 1: Extending Default Theme

To utilize the clamp() function in TailwindCSS, the default theme needs to be extended. In a Next.js application, this can be done by modifying the tailwind.config.js file within the theme object.

module.exports = {
  content: [...],
  theme: {
    extend: {
      fontSize: {
        clamp: "clamp(1rem, 5vw, 3rem)",
      },
    },
  },
  plugins: [],
};

In this code, the fontSize object within the extend property is defining a named font size of clamp. The clamp() function is used to specify the minimum, default, and maximum font sizes to be used for the element.

To use the newly defined clamp font size, simply pass text-clamp as an additional className to the relevant component in your JSX or TSX code.

Solution 2: Custom CSS with Arbitrary Properties

To clamp the font size using TailwindCSS, you can create custom CSS using the [font-size:] syntax, where : represents an arbitrary property. This allows you to define custom CSS rules that are not predefined in Tailwind’s utility classes.

Example:

h1 {
  font-size: _clamp(2em, 5vw, 10em);
}

In this example, the font-size property is set to a _clamp() function, which takes three arguments: the minimum font size (2em), the font size that scales linearly (5vw), and the maximum font size (10em). This ensures that the font size of the h1 element will scale linearly between 2em and 10em, based on the viewport width (5vw).

Q&A