tailwindCSSで幅のピクセルを設定する際にspacingが結構便利だった

tailwindCSSで width の設定値を定義する際に、 設定ファイルで width を設定するのも良いのですが、僕のおすすめは spacing の設定を使用することです。

どう言うことかというと、 width は文字通り幅の設定しかできないですが、 spacing を設定すると、 margin, padding, width, height, top, leftなど様々なものに適用できます。

module.exports = {
  purge: [],
  theme: {
    extend: {
      spacing: {
        'sidebar-pc': '64px'
      }
    },
  },
}

例えばこのように、サイドバーの幅を設定した場合、 サイドバーの幅は w-sidebar-pc で表すことができます。

サイドバーを position: fixed; にした場合は、メインコンテンツに margin-leftを設定する必要がありますので、 ml-sidebar-pc というふうにしてあげます。

このように、 widthでもpaddingでもmargindでも top,left,right,bottomでも使える設定値、 spacingは結構便利なので、積極的に使っていきましょう！