Tailwind CSS互換の「Windi CSS」をGridsomeで使ってみた

Windi CSSとは？

Windi CSSはCSSフレームワークで、「使用するCSSコードのみをロードするので、未使用コードをパージする必要がない」というのが強みだとか。しかも、現在使っているTailwind CSS（2.0）と完全互換するそうなので、Tailwind CSSからの乗り換えにも対応します。そのためのマイグレーションも用意されています。

GridsomeでTailwind CSSを使うのは少々難があったので、今回Windi CSSに乗り換えてみました。

Gridsomeでのインストール方法

GridsomeというマイナーなSSGにも公式で対応しています。

Integration for Gridsome

yarn add gridsome-plugin-windicss -D

でプロジェクトにインストールして、gridsome.config.jsに追記するだけです。

export default {
  // ...
  plugins: [
    {
      use: 'gridsome-plugin-windicss',
      options: {
        // see https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
      },
    },
  ],
}

これだけでWindi CSSが使えるようになります。

ローカルで立ち上げてもビルドしてもgridsome-plugin-tailwindcssのようにエラーは出ません。

GridsomeでTailwind CSSを使おうとして、PostCSS周りのエラーで困っている方には嬉しいところですね。

実際にビルドしたソースを見ても、しっかりと使うところだけを出力していますし、ビルド時間も非常に高速です。

Windi CSSの使い方

Windi CSSの使い方は、基本的にCSSフレームと同様で、ひたすらHTML要素にクラスを付与していくやり方になります。

<p class="text-center font-sm">テスト</p>

っていう感じです。

メリットとしては、「同じようなコードを何回も書く」というCSS特有のデメリットを減らすことが出来て、しかも細かい計算をしなくても、サイズやカラーなどが最初から良い感じで用意されている点です。

デメリットとしては、HTMLのクラスが長くなることと、どうしても「っぽく」なることでしょうか。それでも、カスタマイズが可能など自由度が高いので、Bootstrapよりかは「っぽさ」は少ない印象です。

GridsomeとWindi CSSの相性

こちらは特別良いとも悪いとも言えないというか、普通に動くという印象。

GridsomeはVue.jsベースなので、ATOMICなコンポーネントデザインを使っている方は、自分で書いた方が楽かもしれませんが、テンプレートベースでざっくりと組んでいる方は、恩恵があると思います。

サクッと作れるという意味では、GridsomeとWindi CSSなら数時間でブログレベルなら作れそうです。