Tailwind CSSでのLine Heightの調整方法

Tailwind CSSは、ウェブデザインの際に非常に便利なユーティリティファーストのCSSフレームワークです。
この記事では、Tailwind CSSを使用してテキストの行の高さ（line height）を調整する方法に焦点を当てます。

基本的な使用方法

Tailwind CSSでは、line-heightを設定するためにleading-クラスを使用します。
これにより、テキストの読みやすさを改善したり、デザインの見た目を向上させたりすることができます。

デフォルトの行の高さを使用するには、leading-normalクラスを使用します。
これはブラウザの標準的な行の高さに設定されます。

<p class="leading-normal">これは通常の行の高さです。<br></p>

テキスト間のスペースをもう少し増やしたい場合は、leading-looseクラスが適しています。
これにより、行間が広がります。

<p class="leading-loose">これは緩めの行の高さです。<br></p>

具体的な値（例えば10ピクセル）を行の高さとして指定することも可能です。
この場合は、leading-[10px]のように記述します。

<p class="leading-[10px]">これは10ピクセルの行の高さです。<br></p>

Tailwind CSSのスケールに基づく行の高さを設定するには、leading-5のように使用します。
これはTailwindの事前定義されたスケールを使用します。

<p class="leading-5">これはスケールに基づく行の高さです。<br></p>

Tailwind CSSのleading-クラスを使用すると、テキストの行の高さを簡単に調整することができます。
これにより、より読みやすく、魅力的なデザインを実現することが可能です。
カスタム値を使用することで、さらに柔軟にデザインを調整することもできます。