LoginSignup
30

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-17

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からこんな発表がありました。

要約しますと、

  • tailwindCSSはコマンドからなくなるよ!
  • module形式で

なるほど。特に嬉しいのは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.jsdevModulesを定義し、Moduleを追加
nuxt.config.js
module: [...],
devModules: [
  '@nuxtjs/tailwindcss'
],
  1. npm run dev を実行
  2. tailwind.config.jsassets/css/tailwind.css が自動で生成されるか確認
  3. リネームファイルと生成後のファイルを見比べ適宜移行

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30