この記事はここのえ Advent Calendar 2023 Day 3の記事です。

Intro

ここ暫くはTailwind CSSをメインに使用しているのですが、先日公開されたState of CSS 2023で UnoCSS が紹介されていました。Tailwindとの親和性が高いので、触ってみることにしました。

What's UnoCSS?

軽く調べてみた感じ、TailwindCSSからインスピレーションを得た WindiCSS を開発していたメンバーの1人が UnoCSS を作り始めた、という経緯のようです。公式Docによると、WindiCSSの「精神的後継」という立場だそうです。

UnoCSSの特徴として、Atomic CSS Engine であることが挙げられます。柔軟性・拡張性に優れ、必要な機能のみを導入することができます。

UnoCSSの簡単な仕組み

少し掘り下げると、UnoCSSのCoreはあくまでベースのシステムだけ提供し、Preset がCSSユーティリティを提供する、という関係性です。

例えばTailwindのように margin を調整するために m-1 のようなユーティリティを作るとします。UnoCSSではどうすれば良いでしょうか？

これは uno.config.ts 内にルールを定義しておくことで、それに対応したユーティリティが使えるようになります。

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }]
  ],
})

これで、<div class="m-1"> のようにクラスを当てれば適用されるようになります。
ですが、これではm-1の時にしか対応できないので、任意のmarginサイズに対応できるようにしたいので、正規表現を使って以下のように書き換えます。

// uno.config.ts
export default defineConfig({
  rules: [
+    [/^m-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
  ],
})

これによって、m-100 や m-3.14 といった自由な値のユーティリティを貼れるようになりました。

ただこれをプロジェクト毎に用意するのは面倒なので、Preset という仕組みがあります。

公式やコミュニティが作ったPresetが用意されています。自分が必要な機能が入っているPresetを随時導入していくことで、便利にUnoCSSを使うことができます。
→ 公式のPresetリスト

Atomic CSSについての考え方は、UnoCSS作者の Anthony Fu 氏による Reimagine Atomic CSS という記事が非常に分かりやすいので、オススメです。

導入

npmやyarnで導入します。

yarn add -D unocss

これだけではベースしか導入されていないので、好きなプリセットを入れます。例として基本の @unocss/preset-uno を導入します。

yarn add -D @unocss/preset-uno

導入したら、先述した uno.config.ts を作ってプリセットを読み込みます。

// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'

export default defineConfig({
  presets: [
    presetUno(),
  ],
})

数多くの環境に対応しており、Vite や ESLint なども対応しています。

Preset

公式Presetに絞って紹介します。

@unocss/preset-uno, @unocss/preset-wind

preset-wind は Tailwind, Windi互換のプリセットです。
Tailwindなどで使っていたユーティリティがそのまま使用できます。
設定されているルールも「Tailwindのドキュメントを見てね！」という潔さ。

preset-windですが、最低限のルールだけ定義した preset-mini を継承しています。

また preset-uno は同梱されているデフォルトのプリセットですが、こちらは preset-wind と同一の内容になっているようです¹。

@unocsss/preset-attributify

クラスで当てるだけでなく、直接ユーティリティを指定できるようになります。

<p
  bg="red"
  text="lg white"
  p="x-10 y-5"
  border="~ rounded"
>
  aaaa
</p>

@unocss/preset-icons

アイコンが表示できるようになります。
Iconifyをデータソースとしており、使うアイコンのパッケージを導入しておく必要があります。

例：Material Design Iconsを使う場合

yarn add -D @unocss/preset-icons @iconify-json/mdi

<div class="i-mdi-account-box text-blue-500" />

@unocss/preset-web-fonts

Google Fonts や FontShare のフォントを容易に読み込めます。
uno.config.tsの設定が必要です。

export default defineConfig({
  presets: [
    presetWebFonts({
      provider: 'google',
      fonts: {
        lobster: 'Lobster',
      }
    })
  ],
})

<p class="font-lobster text-lg">test</p>

@unocss/preset-tagify

flex などがタグとして使えるようになります。
ちょっとインパクトが大きいので、使う場合はチームで相談。もちろんPresetごとに導入・導入見送りができるので、導入しないのも一つの選択です。

<flex>
  <p>This is a flex box</p>
  <i-mdi-account-box />
</flex>

Transformers

こちらはPresetと異なり、新しい構文をサポートするための機能です。

Directives transformer

@applyや@screenといったディレクティブをサポートします。

.test
  @apply mt-4 border text-lg

@screen sm
  .test
    @apply text-2xl

Variant group transformer

グループにまとめて書くことができます。
元々Windi CSSにあった機能のようですが、かなり便利そうです。

<div class="font-(bold gray) bg-blue hover:(bg-red font-medium)">test</div>

UnoCSS Inspector

Vite開発サーバを使用している時、localhost:5173/__unocss にアクセスすると、UnoCSSのインスペクタを確認することができます。

まとめ

UnoCSSを触ってみた感じとしては、Tailwindのユーティリティがそのまま使えることもあり、抵抗なく使う事が出来ました。

Tailwindの既存サイトについても、tailwind.config.jsなどの自前テーマやカラースキームさえ移行すれば、そのままコードが転用できるので移行コストもかなり低そうです。

大きな違いとしては、公式のプリセットで定義されたルールが小数点以下も対応しているため、m-55やm-12.3 のようなTailwindで存在しなかった数値も[]を使わずに指定でき、ストレスフリーで良いと思いました。

今回動作スピードについての検証は行いませんでしたが、ホットリロードの反映速度もかなり高速に感じました。UnoCSSの公式ページでは、

It's 5x faster than Windi CSS or Tailwind JIT.

と謳われているので、実際早そうです。

Intaractive Docs や、 PlayGround も使いやすいので、開発も進めやすいです。また v1.0 にはなっていませんが、現時点でかなり良好なので今後のプロダクトで採用したいな～という気持ちです。

参考資料

UnoCSS 公式ドキュメント

https://unocss.dev/presets/uno ↩