Gotcha:
leading-*
(line-height) can sometimes cause unexpected vertical spacing issues or misalignment when trying to line up text with adjacent icons or other elements, especially if their line-height differs or if they are not explicitly aligned.
Below, text with different `leading` values is placed next to an icon. Without proper alignment (e.g., flexbox `items-center`), the text might not align vertically as expected with the icon, especially if the `leading` value pulls the text's baseline up or down significantly.
Text with leading-tight. (Observe potential slight misalignment relative to icon's center)
To robustly align elements like text (with varying line heights) and icons, use Flexbox with
items-center
(or
items-baseline
if preferred for text alignment).