Tailwind CSSでもピクセルコーディング

この記事はReact(もしくはVue)を使うことを前提として話をしています。WordPressや単なるHTMLなどを用いるWeb制作などでピクセルコーディングをする際、Tailwind CSSは全くお勧めできませんのでその点はご留意ください。

JIT modeはなるべく使わない

Tailwind CSSにはJust-in-Time Modeというものがあり、任意の値を設定できます。

const Component = () => {
  return (
    <h1 className="text-[1.9rem]">Hello world!</h1>
    // font-size: 1.9rem; に変換される
  );
};

Tailwind CSSがデフォルトで提供しているサイズの値は、
例えばw-1ならwidth: 0.25rem, w-2ならwidth: 0.5remというように0.25rem倍されて使用されます。しかしデザイナーさんにXDなどでデザインをもらってコーディングをする際、正確な値を指定したい場合にこれらの提供済みのユーティリティークラスでは対応できないことの方が多いと思います。
なので通常、細かい値を設定したいときは逐一カギ括弧[]を使っていくと思うのですが、私の場合それをしません。それには以下の理由があります。

• 提供されているサイズとカギ括弧で指定した値が混ざって可読性が下がるから
• JIT modeで書くときタイピングをするのが面倒だから

そこで私はなるべくJIT modeを使わずにピクセルコーディングをできるように、width: 10pxと表したいならw-10と記述すればいいようにしました。tailwind.config.jsは以下のようになります。
また注意点として、1rem = 10pxとなるように設定してあります。

tailwind.config.js

const pixels = new Set([0, 1, 2, 3, 10]); // 新しいピクセルを追加するときはこの配列に
const remsMap = {};
pixels.forEach((px) => {
  remsMap[px] = `${px / 10}rem`;
});

module.exports = {
  // ...
  theme: {
    spacing: {
      ...remsMap,
      auto: 'auto',
      initial: 'initial',
    },
    fontSize: remsMap,
    // ...
  },
  // ...
}

こうすることで、すでに登録済みのピクセルは他のプロパティでもすぐに指定することができます。
だんだん登録済みにピクセルが増えていくことで、"Tailwind"という言葉通りスタイリングは追い風になっていきます。XDに書いてあるピクセルをそのままw-10のように指定すればいいとなれば、迷いがなくなってとても作業が楽になり、可読性も上がります。

ぜひ参考になればと思います。ありがとうございました。