Search code examples
csstailwind-css

Force less line spacing in Tailwind CSS

Using Tailwind CSS when I add to:

<ul class='list-inside list-disc px-0.5'>
    <li>👍 <span class='italic font-semibold'>Billpay</span></li>
    <li>👍 <span class='italic font-semibold'>Check</span></li>
    <li>👍 <span class='italic font-semibold'>EFT</span></li>
    </ul>

text-xl:

<ul class='list-inside list-disc px-0.5'>
    <li><span class='text-xl'>👍</span> <span class='italic font-semibold'>Billpay</span></li>
    <li><span class='text-xl'>👍</span> <span class='italic font-semibold'>Check</span></li>
    <li><span class='text-xl'>👍</span> <span class='italic font-semibold'>EFT</span></li>
    </ul>

The spacing on the lines increase from:

before, desired spacing

to:

after, extra spacing

How can I keep the original spacing?

Solution

  • By default, Tailwind applies a different line height for each text size (see: https://tailwindcss.com/docs/font-size). For normal text the line height is 1.5rem, and for text-xl it's 1.75rem. To tighten up your lines, you could try applying the utility classes text-xl leading-normal (or text-xl leading-snug, if it's still too tall).