nuxt-tailwindをmodule版に切り替える

tailwindcssはいいぞ

tailwindcssをご存知ですか？CSSフレームワークというよりユーティリティクラス群といった内容で、bootstrapやmaterial design系のフレームワークとは一線を画しています。

何を隠そうわたしゃこのtailwindが大好きでね、もうわざわざ定義済みのコンポーネント付きフレームワークを使って必死にカスタムするより、ReactやVueなんかでコンポーネントは独自に定義しながら、自由に（しかし緩いルールを用いながら）このtailwindでスタイルをつけていくのが実にしっくり来ており、重宝しています。

最近は採用事例も一気に増えてきており、ちょっぴり嬉しく。
https://send.firefox.com/ もtailwindを利用してますね。

nuxt.jsにおけるサポート

tailwindcssはnuxt.js ではcliからサポートされていて npx create-nuxt-app *** のコマンド後、 ?Use a custom UI framework という選択肢から選ぶことが可能です。既存のnuxtプロジェクトでtailwindを利用の方は、この方法で導入した人が多いのではないでしょうか。
しかし2019/06/11、nuxt.jsの公式Twitterからこんな発表がありました。

Tailwind CSS is now a command away from your NuxtJS project ✨

Install the module and get:
🗃️ Automatic files creation
🧹 PurgeCSS included
🚀 PostCSS preset env to stage 1 https://t.co/IJkPYApxyT

— Nuxt.js (@nuxt_js) 2019年6月11日

要約しますと、

• tailwindCSSはコマンドからなくなるよ！
• module形式で
  • 自動ファイル生成
  • PurgeCSSに対応
  • PostCSS preset env stage1に対応

なるほど。特に嬉しいのはPurgeCSSを含めてくれてるところです。tailwindはユーティリティクラス群であるため、どうしてもファイルサイズが大きくなりますが、PurgeCSSは利用していないCSSクラスをビルド時に削除してくれます。
最終的にビルドされるファイルサイズが、かなり小さくなるはずです。

もちろん既存のcreate-nuxt-app... でもPurgeCSSは設定を書けば追加可能ですが、面倒な方は既存のプロジェクトから今回のmodule版に入れ替えてしまう方が楽だと思います。

module版への切り替え手順

1. 既存のtailwindcssを削除

$ npm uninstall tailwindcss

1. 既存の設定ファイル及びCSSをリネームor削除

$ mv tailwind.config.js _tailwind.config.js
$ mv ./assets/css/tailwind.css ./assets/css/_tailwind.css

1. nuxt.config.js 内のbuildにある下記内容を削除

nuxt.config.js

postcss: {
  plugins: {
	tailwindcss: './tailwind.config.js'
  }
},

1. 新規でModule版をインストール

npm install --save-dev @nuxtjs/tailwindcss

1. nuxt.config.jsに devModulesを定義し、Moduleを追加

nuxt.config.js

module: [...],
devModules: [
  '@nuxtjs/tailwindcss'
],

1. npm run dev を実行
2. tailwind.config.js と assets/css/tailwind.css が自動で生成されるか確認
3. リネームファイルと生成後のファイルを見比べ適宜移行

PurgeCSS適用後のファイルサイズを比較

npm run buildし、dist/_nuxt内に出来たファイルサイズを比較

	nuxt-create-app版	module版
size	560KB	200KB

もともとNuxt.jsはファイルサイズが巨大になりがちですが、それでもPurgeCSSをかませることで半分以下にはなりました。