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

last updated at 2022.04.21

Tailwind CSSのデフォルト設定のままで .text-{size}ユーティリティを使用すると下記のように line-height の値も勝手にくっつけてくれますね

.text-base

font-size: 1rem;
line-height: 1.5rem;

.text-2xl

font-size: 1.5rem;
line-height: 2rem;

読みやすさのために気を効かせてくれてるのでしょうが、継承した値をそのまま使いたいこともあります。

tailwind.config.js を編集するとなくすことができます。（該当箇所のみ抜粋）

module.exports = {
  theme: {
    extend: {
      fontSize: {
        'base': ['1rem', null],
        '2xl': ['1.5rem', null]
      }
    }
  }
}