GridsomeでCSSフレームワーク・Tailwindcssを使う（PurgeCSSも）

Gridsome用のプラグインを使う場合

有志の方がGridsomeでTailwindcssをインポートするためのプラグインを公開してくれているので、そちらを使うと簡単にインポートが可能です。

yarn add gridsome-plugin-tailwindcss tailwindcss@latest

通常のTailwindcssと同様、プロジェクトルートに「tailwind.config.js」をおけばプラグインの追加や細かい設定が可能です。

PostCSS問題

Tailwindcssは、最新のv2.0からPostCSS 8に対応しています。しかし、ビルド環境がPostCSS 7の場合、Tailwindcssを使うにはPostCSS 7版のTailwindcssをインストールする必要があります。

yarn remove tailwindcss postcss autoprefixer
yarn add -d tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

ちなみに、gridsome-plugin-tailwindcssはTailwindcssは2.0以上、PostCSSも8以上を依存パッケージに指定しているので、他の設定がない限りは使えるはずです。

Tailwindcss、容量でかすぎ問題

TailwindcssはCSSをHTMLクラスでそのまま使えるようにしているフレームワークなので、サイズがかなりデカく、そのままだと出力したページが2MBくらいのCSSを読むことになってかなり現実的ではありません。

どうするかというと、使っていないCSSを自動で削除してくれる、PurgeCSSを使います。

PurgeCSS

PurgeCSSは、Vue.jsに対応しているので、Gridsomeでも使えます。ただし、PurgeCSSはPostCSS 8が必要なので、Post CSS7環境ではPost CSS8をインストールする必要があります。

Gridsome用のPurgeCSSプラグインをTailwindcssのGridsome用プラグインと同じ作者の方が公開してくれているので、そちらを使うのがベストです。

gridsome-plugin-purgecss

yarn add gridsome-plugin-purgecss

// gridsome.config.js
plugins: [
  {
    use: 'gridsome-plugin-purgecss',
  }
]

optionは書かないでも使えます。

ビルド後のCSSファイルを確認すると、数十KBくらいまで減量できているはずです。

GridsomeでTailwindcssを使う方法を見てきました。

Vue.js用のVue.js UIフレームワークは、使えないものが結構あるので、普通に使えるTailwindcssのプラグインがあるは地味に助かりますね。