为什么使用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>

图像1

图像2

你好！

我使用Tailwind CSS。Image2是使用顺风CSS的按钮。Image1是纯CSS的按钮。

为什么使用Tailwind CSS时文本基线高度不同？

两个跨度使用相同的字体样式是

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

Answer 1

Tailwind CSS为每个字体大小的实用程序定义了一个默认的line-height。您可以在"字体大小文档页"的"属性"下查看默认值。

您还可以提供默认的font-size、line-height、letter-spacing、font-weight，并通过在tailwind.config.js文件中更改默认值来禁用默认值：链接。

Tailwind的默认主题为每个text-{size}实用程序配置了合理的默认行高。使用自定义字体大小时，您可以通过在tailwind.config.js文件中使用形式为[fontSize，lineHeight]的元组定义每个大小来配置自己的默认行高。