Why text baseline height different when use Tailwind CSS?

Question

<button type="button" class="flex items-center px-5 py-2 bg-[#152DB5] rounded-[9.9rem]">
  <svg><!-- ... --></svg>
  <span class="inline-block align-middle text-[1.4rem] font-[700] leading-[2.2rem] tracking-[-0.01em] text-[#fff]">코드 올리기</span>
</button>

Image1

Image2

Hello!

I use Tailwind CSS. Image2 is button that use tailwind CSS. Image1 is button that pure CSS.

Why text baseline height different when use Tailwind CSS?

two span use same font style is

font-size: 1.4rem;
font-weight: 700;
line-height: 20px;
letter-spacing: -0.01em;

Answer 1

Tailwind CSS defines a default line-height for each font-size utility. You can view the default values in the Font Size Documentation Page under properties.

You can also provide a default font-size, line-height, letter-spacing, font-weight and disable the default values by changing them in your tailwind.config.js file: link.

Tailwind’s default theme configures a sensible default line-height for each text-{size} utility. You can configure your own default line heights when using custom font sizes by defining each size using a tuple of the form [fontSize, lineHeight] in your tailwind.config.js file.