Nuxt.js × Windi CSS を試してみた

Prologue

Windi CSS の存在を知り、見てみたらドキュメントも分かりやすそうだったので触ってみました。

公式: https://windicss.org/

環境

• macOS: v10.15.6
• node.js: v12.18.2
• terminal: iTerm
• エディタ: VS Code
• パッケージマネージャ: yarn

Windi CSS とは

• Tailwind CSS のための next generation compiler。
• Tailwind v2.0 以降をサポートし、より早いロード時間をサポートしている。
• Tailwind を使っていなくても utility-first な CSS ライブラリとして使える。

特徴

• コンパイルが速い。
  使用するCSSのみをロードし、パージは必要ない。
• TailwindCSS をサポートしている。
• 変数は自動推論される。
  Class のセマンティクスに基づいて自動的に生成される。
  https://windicss.org/guide/features.html
• クロスブラウザ互換。

Nuxt に入れてみる

Nuxt に vue-windicss-preprocess をインストールする、らしいのですが、CLI からも選択できたので今回はそちらから作成してみました。

参考: https://windicss.org/guide/vue.html#nuxt

プロジェクト名は nuxt-windi-css で作成。

% yarn create nuxt-app nuxt-windi-css 

create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in nuxt-windi-css
? Project name: nuxt-windi-css
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Windi CSS
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? mi**
? Version control system: Git

• nuxt-windicss-module: README と照らし合わせながら package.json, nuxt.config.js を確認してみます。

package.json

"devDependencies": {
  // 略
  "nuxt-windicss": "^0.4.4"
}

nuxt.config.js

buildModules: [
  // https://go.nuxtjs.dev/typescript
  '@nuxt/typescript-build',
  'nuxt-windicss',
],

README 通りに入っているので特に追記することはありませんでした。

動かしてみる

そんなに大きなコードではないので、速さの実感はあまり得られず...
変数などを確認してみました。

@apply

既存の utility class を style にインライン化する directives。

参考: https://windicss.org/guide/directives.html
tailwind: https://tailwindcss.com/docs/functions-and-directives#apply

以下のような共通化できそうなボタン style を @apply を使って書き換えてみます。

• before

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

• after

.btn-default {
  display: inline-block;
  border-radius: 4px;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green {
  @apply btn-default;
  border: 1px solid #3b8070;
  color: #3b8070;
}

用意された utilities を使ってみます。

参考: https://windicss.org/utilities/

.btn-default {
  /* display: inline-block; */ 
  @apply inline-block;
  border-radius: 4px;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green {
  @apply btn-default bg-green-600;
  border: 1px solid #3b8070;
  color: #3b8070;
}

@dark

参考: https://windicss.org/utilities/variants.html#following-system

Following System とあるので @media (prefers-color-scheme: dark) {...} でセットした項目を使えるようになる...？
一旦は prefers-color-scheme: dark でそのまま書いてみましたが、使えるようになったらすっきりしそう。

@media (prefers-color-scheme: dark) {
  .button--green {
    @apply bg-blue-50;
  }
}

.button--green {
  @apply btn-default bg-green-300;
  border: 1px solid #3b8070;
}

• dark mode

VSCode Vetur の設定を変更

semi-colon expectedcss(css-semicolonexpected) のようなエラーが出る

settings.json を開き、"vetur.validation.style": false を追記する。

Epilogue

今回はちょっと触るだけで終わりにしましたが、CLI から作るにしても後から install するにしても簡単に導入できてかなりハードルは低い、と感じました。
utilities や variants もドキュメントがあるので迷子になることはなさそうな気がします。

Vite や Svelte でも使えるようなので、次回はその辺りからアプローチしてみようと思いました。