TailwindCSSでfontsizeをカスタマイズする

執筆日: 2021-08-20

概要

TailwindCSSを使用する際の魅力として、クラスのカスタマイズ性があげられます。
tailwind.config.jsにてthemeオブジェクトに定義すれば使用することができます。

個人で使用していてfontsizeに関するクラスが扱いづらいと感じ、融通が効くカスタマイズを見つけたので共有していきたいと思います。

[問題]fontsizeのどこが気になるのか

豊富なfontsizeのどこが気になるのかを述べていきます。

スタイルの適応

例えば以下のようにスタイリングしたいと思います。

<p className="text-sm md:text-base leading-loose">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet consectetur dignissimos dolor excepturi impedit necessitatibus optio perferendis, praesentium sed. Enim, ex excepturi facere id magni non quidem repellat voluptatem.</p>

リプサムの文章ですが、leading-looseを常に適用されていると思いきや、この場合md以上になるとmd:text-baseについているline-heightが適用されてしまいます。
これではmdから上書くことになりますし、冗長になってしまいます。

痒いところに手が届かない

tailwindcssには豊富なデフォルト値があります。

ですが 、デザインカンプをカバーしきれないサイズがでてくることが予測できます。
「このサイズはなかったので追加しないと」を繰り返すのも作業効率がよくありませんね。

[解決]JavaScriptなんだから生成すればいいじゃない

tailwind.config.jsもjavascriptなので、自分でクラスを生成すれば良いと言う結論です。

設定ファイル作成

configs/utils.js
function pxToRem (px, root = 16) {
  return px / 16
}

module.exports = {
  pxToRem
}
configs/fontSize.js
const { pxToRem } = require('./utils')

const customFontSize = (function() {
  const min = 10
  const max = 100
  const increment = 1
  const fontSize = {}

  let i = min

  while(i <= max) {
    fontSize[`${i}px`] = `${pxToRem(i)}rem`
    i += increment
  }
  return fontSize
})()

module.exports = customFontSize
configs/index.js
const customFontSize = require('./fontSize')

module.exports = {
  customFontSize
}

設定反映

configsディレクトリ配下に上記ファイルを作成し、tailwind.config.jsに適応していきます。

tailwind.config.js
const { customFontSize } = require('./configs')

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    fontSize: customFontSize,
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

これで10から100pxまでのクラス生成ができました。

クラス再生成後のスタイリング

先程の例を書き直してみます。
line-heightが左右されず、適応されているはずです。

また、10-100pxの間ではクラス名を変えるだけで適応できます。

<p className="text-14px md:text-16px leading-loose">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet consectetur dignissimos dolor excepturi impedit necessitatibus optio perferendis, praesentium sed. Enim, ex excepturi facere id magni non quidem repellat voluptatem.</p>

spacerにも応用できる

これはfontsizeだけでなく、marginやpaddingなどでも使用できるので、ぜひ使用してみてください。

参考リポジトリ

以下、私が作成したnext.js + tailwindcssのテンプレートがありますので、よければ参考にしてみてください。
https://github.com/k-logic24/template-next-with-tailwindcss

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店