Tailwind CSSでカスタム行高さを設定する方法

この記事では、Tailwind CSSを使用してカスタムの行高さを設定する方法について説明します。
Tailwind CSSは、事前定義された行高さのスケールを使用しますが、プロジェクトに特有の行高さが必要な場合は、独自の設定を追加することができます。

ステップ 1: `tailwind.config.js` ファイルの編集

最初のステップは、tailwind.config.js ファイルを開いて、カスタムの行高さを定義することです。

module.exports = {
  theme: {
    extend: {
      lineHeight: {
        custom: '18px',
      },
    },
  },
}

この例では、行高さに custom という名前を付け、その値を 18px に設定しています。
この名前は任意で、プロジェクトに合わせて変更することができます。

次に、HTMLファイル内でこの新しいカスタム行高さを適用します。

<p class="leading-custom">ここにテキストが入ります。<br></p>

leading-custom クラスを使用することで、指定した要素にカスタムの行高さが適用されます。

Tailwind CSSでは、このようにして簡単にカスタム行高さを設定できます。
設定ファイルでの少しの変更と、適切なクラスの使用で、テキストの視覚的な表示を細かくコントロールすることが可能です。