Tailwind CSSのフォントサイズクラスにはデフォルトでline-height
プロパティもついています(参考: Font Size - Tailwind CSS)。デザインがかっちり決まっている時には若干不便なので、設定ファイルで削除します。
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
const defaultFontSize = defaultTheme.fontSize;
const fontSize = {};
Object.keys(defaultFontSize).forEach((key) => {
fontSize[key] = [defaultFontSize[key][0]];
});
module.exports = {
theme: {
fontSize,
}
};
fontSizeは配列でフォントサイズとその他のパラメータが格納されています(参考: Font Size - Tailwind CSS)。なので、配列0番目の値だけ抽出して指定しなおしてあげればOKです。
やってみれば案外簡単なことなんですが、ググっても出てこなかったので記事にしました。同じように悩んでいる方はお試しあれ。