Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
30
Help us understand the problem. What is going on with this article?
@nkumag

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

More than 1 year has passed since last update.

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

30
Help us understand the problem. What is going on with this article?
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
nkumag
もはや職業プログラマでなく、管理職でも無く、単なる事務になった悲しきモンスター。誰かコードを書く仕事を下さい。コード書いて終わる仕事だけ下さい。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
30
Help us understand the problem. What is going on with this article?