Help us understand the problem. What is going on with this article?

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

要約しますと、

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

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

https://tailwindcss.com/docs/controlling-file-size/#app

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

module版への切り替え手順

https://github.com/nuxt-community/nuxt-tailwindcss

  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をかませることで半分以下にはなりました。

nkumag
マネージャー業務の日々ですが、なんとか食らいついていきます。
http://onori.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした