问题描述
在使用 Tailwind CSS 进行前端开发时，我们可能会遇到一个很奇怪的问题：文字间距无法生效，即使我们按照官方文档中的方式设置了 spacing 类或 leading 类的数值，但页面上的文字仍旧会紧凑排列，无法达到预期的间距效果。
举个例子，我们想要实现一个列表，每个列表项之间有一定的间距，我们可以在 HTML 代码中这么写：
<ul class="list-disc list-inside"> <li class="mb-4">列表项1</li> <li class="mb-4">列表项2</li> <li class="mb-4">列表项3</li> </ul>
其中，mb-4 类表示每个列表项的下边缘与下一个列表项之间的间距是 4 个栅格单位。但是，无论我们设置的数值是多少，列表项之间都不会有明显的间距效果。
问题原因
通过查阅 Tailwind CSS 的文档以及 GitHub 上的讨论，我们可以发现，这个问题实际上是由于浏览器的行高计算规则导致的。
在 CSS 中，行高（line-height）是一个比较特殊的属性，它不仅可以控制行内元素的垂直对齐方式，还可以影响到行内元素之间的垂直间距。具体来说，如果一个元素的行高大于它的字体大小，则会导致行内元素之间的距离变小；而如果行高小于字体大小，则会导致行内元素之间的距离变大。
Tailwind CSS 为了提高样式的可复用性和可维护性，设计了一系列 spacing 类和 leading 类，用来精确地控制元素之间的间距和行高。但是，由于浏览器计算行高的规则比较复杂，尤其是在排版过程中会考虑各种因素比如汉字和英文的混排等等，因此 Tailwind CSS 的 spacing 类和 leading 类并不能总是达到预期的效果。
解决方案
为了解决这个问题，我们需要在样式表中给置空元素的行高，然后手动指定行高和垂直对齐方式。具体来说，我们可以按照以下步骤进行操作：
- 给需要设置文字间距的元素加上
leading-none类，将行高重置为默认值。 - 给元素指定一个明确的行高，例如
leading-normal（与默认行高相同）或leading-loose（比默认行高高 1.25 倍）等。 - 如果需要调整文字的垂直对齐方式，可以再加上一些与 display 属性配合使用的类，例如
align-top、align-middle、align-bottom等等。
通过这些操作，我们就可以在 Tailwind CSS 中实现美观、规范的文字间距了。下面是示例代码：
<ul class="list-disc list-inside"> <li class="leading-none leading-normal mb-4">列表项1</li> <li class="leading-none leading-normal mb-4">列表项2</li> <li class="leading-none leading-normal mb-4">列表项3</li> </ul>
总结
Tailwind CSS 是一种非常高效、灵活的前端开发框架，但是在使用过程中也会遇到一些奇怪的问题，需要我们经过思考和实践来解决。本文介绍了 Tailwind CSS 中文字间距失效的原因以及解决方案，希望能够帮助大家更好地使用这个优秀的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64841eda48841e9894349e30