【JS】Next.jsにJITのtailwindを設定する時につまづいた所
こんにちは!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を切らないと移行できません。つらみ。以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介