Tailwind CSS text-size property overriding line height - tailwind-css

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.