【Tailwind CSS】Font Sizeユーティリティーにくっついてくる line-height を削除する方法

Tailwind CSSはデフォルト設定で、非常に便利な機能を提供しています。例えば、フォントサイズを指定する際に、自動的に適切な行間（line-height）も設定してくれます。

この機能により、テキストの読みやすさが向上し、デザインの一貫性が保たれます。以下に具体的な例を示します。

デフォルト値

.text-base {
    font-size: 1rem;       /* フォントサイズ */
    line-height: 1.5rem;   /* 行間 */
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

上記の例では、.text-base クラスではフォントサイズが 1rem で、行間が 1.5rem となっています。
また、.text-2xl クラスではフォントサイズが 1.5rem で、行間が 2rem と設定されています。これにより、テキストは視覚的にも読みやすくなります。

デフォルト値を上書きする

しかし、場合によってはこの自動設定された行間ではなく、継承された値や別の値を使用したいことがあります。
そんな時には、Tailwindの設定ファイル tailwind.config.js を編集することで、自由にカスタマイズすることができます。具体的には、フォントサイズの設定に null を指定することで、行間を自動設定から解除し、別の値を指定できるようになります。

参考:
Providing a default line-height

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'base': ['1rem', null],  /* 'base' サイズの行間を解除 */
        '2xl': ['1.5rem', null]  /* '2xl' サイズの行間を解除 */
      }
    }
  }
}

この変更により、.text-base および .text-2xl クラスにおける行間の自動設定がなくなり、より細かいスタイル制御が可能になります。
このような柔軟性が Tailwind CSS を使う大きな利点の一つです。