Zenn
🙌

TailwindCSSのmarginやfont-sizeをpx指定できるテーマを作成

2021/04/13に公開
Next.js
Tailwind CSS
tech

概要

TailwindCSSはモバイルファーストな設計となっている。
「デフォルトのサイズ指定がrem」、「widthやmarginなど4の倍数でしか準備されていない」などなど、、、このため（1px単位の精度を求められる）複雑なデザインを実装する案件では使いづらかった。そこでpx指定を行えるようカスタムテーマを作成した。

Gitに上げているので、早速ソースをみたい方はこちらからどうぞ。
tailwind.conf.jsを確認すれば理解できると思う。

remからpx指定へ

Tailwindでは以下のプロパティの表現するため、単位にremを用いたクラスを用意している。

font-size / height / width /
margin / padding / inset(top,right,bottom,left) /
line-height / border-radius

本記事で全てを解説するのはキリがないのでfont-sizeで説明する。
フォントサイズのデフォルトで準備されているクラス

text-sm ・・・ font-size: 0.875rem;
text-lg ・・・ font-size: 1.125rem;
text-xl ・・・ font-size: 1.25rem;

これを「text-〇〇px」で使えるようにした。

text-14px ・・・ font-size: 14px;
text-18px ・・・ font-size: 18px;
text-20px ・・・ font-size: 20px;

設定方法

tailwind.config.jsのthemeのfontSizeに指定すると独自の指定が可能となる。
公式ページ

tailwind.config.js
module.exports = {
  purge: [
  ],
  theme: {
      fontSize: {
	'14px': '14px',
	'18px': '18px',
	'20px': '20px',
      }
  variants: {},
  plugins: [],
}

ただ手動で設定するのは大変なので、最小/最大を指定するとループで値を生成するファイル(fontSize.js)を用意し、tailwind.config.jsも以下のように変更した。

fontSize.js
// default set: 10~100px
const MIN_SIZE        = 10   // 最小値
const MAX_SIZE        = 100  // 最大値
const INCREMENTS_NUM  = 1    // インクリメント

let fontSize = {}
let i = MIN_SIZE

while(MAX_SIZE >= i) {
  fontSize[`${i}px`] = `${i}px`
  i = i + INCREMENTS_NUM
}
module.exports = fontSize
tailwind.config.js
const fontSize = require('./fontSize.js')
module.exports = {
  purge: [
    './src/modules/**/*.{js,ts,jsx,tsx}',
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/sass/*.sass',
  ],
  theme: {
      fontSize
  }
  variants: {},
  plugins: [],
}

fontSize.jsの最小を10、最大を100としたことで、「10px ~ 100px」までクラスが作成される。
使わない不要なクラスも作成されるため、purgeを設定することで使っていないクラスはコンパイル時に省くようにする。

purgeについて詳しく知りたい方はこの記事がおすすめ
https://zenn.dev/ryo_kawamata/articles/purage-tailwind

extend指定しなかった理由

端的にいうと、applyできなかったためである。
extend指定していないのでTailwindCSSがデフォルトで提供するfont-sizeの指定が使用できなくなる。

以下のようにcss(sass)側でもtailwindの指定をできるのだが、extedした場合はスタイルが当たらなかった。（バージョンは2.0.3)

.hoge
  @apply text-20px

カスタムテーマサンプル

gitにサンプルを置いたので気になった方は確認してみてください。
PixelThemeForTailwindCSS
上記の説明ではfont-sizeのみ取り上げましたが、gitに置いたサンプルはwidthやheight、marginなど主要なプロパティを設定しています。以下ファイルが今回のメインとなるファイルです。

  • tailwind-theme・・・今回のメインとなるテーマファイル
  • tailwind.config.js・・・設定ファイル

以上。

Discussion