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 ✨
— Nuxt.js (@nuxt_js) 2019年6月11日
Install the module and get:
🗃️ Automatic files creation
🧹 PurgeCSS included
🚀 PostCSS preset env to stage 1 https://t.co/IJkPYApxyT
要約しますと、
- tailwindCSSはコマンドからなくなるよ!
- module形式で
- 自動ファイル生成
- PurgeCSSに対応
- PostCSS preset env stage1に対応
なるほど。特に嬉しいのはPurgeCSSを含めてくれてるところです。tailwindはユーティリティクラス群であるため、どうしてもファイルサイズが大きくなりますが、PurgeCSSは利用していないCSSクラスをビルド時に削除してくれます。
最終的にビルドされるファイルサイズが、かなり小さくなるはずです。
もちろん既存のcreate-nuxt-app...
でもPurgeCSSは設定を書けば追加可能ですが、面倒な方は既存のプロジェクトから今回のmodule版に入れ替えてしまう方が楽だと思います。
module版への切り替え手順
- 既存のtailwindcssを削除
$ npm uninstall tailwindcss
- 既存の設定ファイル及びCSSをリネームor削除
$ mv tailwind.config.js _tailwind.config.js
$ mv ./assets/css/tailwind.css ./assets/css/_tailwind.css
- nuxt.config.js 内のbuildにある下記内容を削除
postcss: {
plugins: {
tailwindcss: './tailwind.config.js'
}
},
- 新規でModule版をインストール
npm install --save-dev @nuxtjs/tailwindcss
-
nuxt.config.js
にdevModules
を定義し、Moduleを追加
module: [...],
devModules: [
'@nuxtjs/tailwindcss'
],
-
npm run dev
を実行 -
tailwind.config.js
とassets/css/tailwind.css
が自動で生成されるか確認 - リネームファイルと生成後のファイルを見比べ適宜移行
PurgeCSS適用後のファイルサイズを比較
npm run build
し、dist/_nuxt
内に出来たファイルサイズを比較
nuxt-create-app版 | module版 | |
---|---|---|
size | 560KB | 200KB |
もともとNuxt.jsはファイルサイズが巨大になりがちですが、それでもPurgeCSSをかませることで半分以下にはなりました。