How should you support different font sizes and heights for different font-families in Tailwind?

Question

In our tailwind.config.js file we have

      fontSize: {
        xxs: ["0.75rem", "0.75rem"], 
        xs: ["0.875rem", "1.25rem"],
        sm: ["1rem", "1.5rem"],
        base: ["1.125rem", "1.75rem"],
        lg: ["1.25rem", "1.75rem"],

This allows us to use classes such as text-xs, text-sm etc.

In our design we are using 2 different font families. The designer would like us to use a different line height for "sm" when using the second font.

What is the tailwind way of solving this? Should we add it to the theme? Use leading or something else?

Answer 1

You can extend the fontFamily and lineHeight in the tailwind.config.js, and add a custom plugin to automatically apply the desired line-height for different font sizes when using the secondary font family.

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        primary: ["primary", "sans-serif"],
        secondary: ["secondary", "serif"],
      },
      lineHeight: {
        "sm-secondary": "1.25rem", 
        "lg-secondary": "1.75rem", 
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme }) {
      const newUtilities = {
        ".font-secondary.text-sm": {
          fontFamily: theme("fontFamily.secondary"),
          lineHeight: theme("lineHeight.sm-secondary"),
        },
        ".font-secondary.text-lg": {
          fontFamily: theme("fontFamily.secondary"),
          lineHeight: theme("lineHeight.lg-secondary"),
        },
      };
      addUtilities(newUtilities, ["responsive", "hover"]);
    },
  ],
};

Examples

<p class="font-secondary text-sm">
  secondary font with 1.25rem line height
</p>

<p class="font-secondary text-lg">
  secondary font with 1.75rem line height
</p>