Tailwind CSS text-size property overriding line height

Question

When adding text size classes for multiple screens, the line-height (leading) class gets overwritten because there is a line-height property on the text-size class (i.e. text-6xl).

.xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1; //this overrides .leading-tight
}

Below are the classes I'm needing just to include the same line-height (leading) at every breakpoint.

<h1 class="text-4xl leading-tight tracking-wide lg:text-5xl lg:leading-tight xl:text-6xl xl:leading-tight">My Title</h1>

Is there a way to avoid having to re-state the leading at each breakpoint and just state leading-tight once?

Answer 1

You can change the default line-height (that the font size utility provides) in tailwind.config.js:

Providing a default line-height - Docs.

In your case, I would set the default line-height to 1.5 rem, which is the value of the leading-tight utility. Then, whenever you want to override your default line-height (which is 1.5rem), you can simply add a custom line-height utility such as leading-[5rem].

Here's an example:

Setting custom fonts / custom line-heights. The second attribute in the array is the default line-height value:

module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '1.25rem'],
      base: ['16px', '1.25rem'],
      lg: ['20px', '1.25rem'],
      xl: ['24px', '1.25rem'],
      header: ['36px', '1.25rem'],
    }
  }
}

HTML: Note that the first paragraph has a different leading value while all the other paragraphs get the default value.

<div class="border-2 border-rose-200 m-24 p-12 flex flex-col items-center">
  <header class="pb-12 underline text-header">A random header</header>
  <p class="text-xl leading-[5rem]">A random paragraph 1</p>
  <p class="text-xl">A random paragraph 2</p>
  <p class="text-xl ">A random paragraph 3</p>
  <p class="text-xl">A random paragraph 4</p>
  <p class="text-xl">A random paragraph 5</p>
</div>

Result:

Tailwind-play link with the example.

Answer 2

A simple solution:

If you do as md:text-xl then you must use leading as md:leading-tight.

for reference see tailwind docs:

https://tailwindcss.com/docs/line-height:

"It’s important to note that by default, Tailwind’s font-size utilities each set their own default line-height. This means that any time you use a responsive font-size utility like sm:text-xl, any explicit line-height you have set for a smaller breakpoint will be overridden.

If you want to override the default line-height after setting a breakpoint-specific font-size, make sure to set a breakpoint-specific line-height as well:"