💨

Next.js と Tailwind でCSSをいじったときにコンパイルが遅い問題をなんとかする

に公開
Next.js
Tailwind CSS
tech

TL;DR

@tailwind utilities;は巨大なので、頻繁に変更するファイルでインポートするとこれを含めて再コンパイルされるから遅い。
別のファイルに切り出してから、使うところで一緒にインポートすれば問題ない。

効果

どのくらい速くなるのかは実際に見てもらうのが早いと思います。（シャレではない）

上がwith-tailwindcssテンプレートのデフォルトで、下がこの記事の手順を踏んだ場合です。

手順

https://github.com/brianlovin/brian-lovin-next/pull/1193/files

このコミットを見ればわかると思いますが一応

next.jsのexampleにあるwith-tailwindcssテンプレートを例として用意します。

yarn create next-app --example with-tailwindcss with-tailwindcss-app
  1. styles/index.cssで@tailwindでインポートしている部分を消す
  2. styles/tailwind.css, styles/tailwind-util.cssを作成し、
    styles/tailwind.cssの中で@tailwind base;, @tailwind components;をインポート。
    styles/tailwind-util.cssの中で@tailwind utilities;をインポートする。
  3. _app.jsでstyles/tailwind.css, styles/index.css, styles/tailwind-util.cssの順でインポートする
  4. おわり

備考

最初はproductionのときだけpurgeする設定についてても書いてたんですが、どうやらデフォルトでdevelopmentのときは無効になるようでコンパイル時間が変わらなかったので省きました。

Discussion