こんにちは！Next.jsの設定でつまづきまくっているMizutani(@sirycity)です。新しい機能多いもん。それがフロントエンドの醍醐味だけどね。

今回はNext.jsのtailwindをJITモードに以移行しようとしたらつまづいた話です。なお、nextjsはv11、nodejsはv16.x、webpackは5を使用しています。簡単に言うと現在最も新しい設定です。

設定したファイル

結果的に変更したのは以下の2ファイルだけでした。

• next.config.js
• tailwind.config.js

でも以下の2ファイルについてもちょっとややこしかったので書きます。

• .postcssrc.js
• _app.tsx

next.config.js

このファイルにはwebpackの設定書くんですが、JIT使う時はloaderの設定を書いてはいけないって所にハマりました。webpack5の場合はasset/sourceを書いてcssをimportしたりするんですが、今回は全消し。消しても動きます。というか消さなきゃ動かん。

module.exports = {
  // webpack: config => {
  //   config.module.rules.push({
  //     test: /\.css$/,
  //     type: 'asset/source',
  //   })

  //   return config
  // },

  // ...略
}

tailwind.config.js

mode: 'jit'を追加するだけです。@tailwindcss/jitってのを追加している例もありましたが、必須じゃないです。多分。こんな感じにしました↓

module.exports = {
  mode: 'jit',
  // ...略
}

.postcssrc.js

こっちは何も追加してないです。こっちも@tailwindcss/jitってのを追加してる例もありましたが、今回はそのまま。こんな感じ。

module.exports = {
  plugins: [
    // '@tailwindcss/jit',
    'tailwindcss',
    'autoprefixer',

    // ...略
  ],
}

_app.tsx

こっちも何も追加してないです。styles.cssはJITにする前からtailwindを読み込んでたcssファイルです。こいつを変わらずimportするだけ。ここでimport "tailwindcss/tailwind.css";ってやってる例もありますが、これはtailwindの諸々を設定してるファイル(今回の場合はstyles.css)を読み込んでる場合は読み込まなくてもいいです。

import '../styles/styles.css';
// import "tailwindcss/tailwind.css";

// ...略

さいごに

結局変える所は2箇所だけなんですが、分かってないと混乱しますね僕だけ？

JITは劇的に便利になるかっていうとアレだけどDXは間違いなく上がるので、移行しましょう...と言いつつIEを切らないと移行できません。つらみ。以上。