beta

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

直感的に使えることで人気のCSSフレームワーク・TailwindcssをGridsomeで使う方法をまとめました。そのままでは巨大なTailwindcssを減量するPurgeCSSも同時に設定します。

公開日:2021年3月1日

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のプラグインがあるは地味に助かりますね。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード