UnoCSS とは？

UnoCSS は、柔軟で拡張可能な設計のインスタントアトミックCSSエンジンです。コアは特定の意見を持たず、すべてのCSSユーティリティはプリセットを通じて提供されます。

例えば、ローカルの設定ファイルにルールを提供することで、カスタムCSSユーティリティを定義できます。

import { defineConfig } from 'unocss'

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

これにより、新しいCSSユーティリティ m-1 がプロジェクトに追加されます。UnoCSSはオンデマンドで動作するため、コードベースで使用するまで何もしません。例えば、次のようなコンポーネントがあるとします。

<div class="m-1">Hello</div>

m-1 が検出され、次のCSSが生成されます。

.m-1 { margin: 1px; }

より柔軟にするために、ルールの最初の引数（マッチャーと呼びます）を RegExp に変更し、ボディを関数にすることで、ルールを動的にすることができます。例えば：

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

これにより、m-1、m-100、m-52.43 のような任意のマージンユーティリティを持つことができます。そして再び、UnoCSSはそれらを使用するたびに生成します。

<div class="m-1">Hello</div>
<div class="m-7.5">World</div>

.m-1 { margin: 1px; }
.m-7.5 { margin: 7.5px; }

プリセット

いくつかのルールを作成したら、それらをプリセットに抽出して他の人と共有できます。例えば、会社のデザインシステムのプリセットを作成し、チームと共有することができます。

import { Preset } from 'unocss'

export const myPreset: Preset = {
  name: 'my-preset',
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [/* ... */],
  shortcuts: [/* ... */],
  // ...
}

import { defineConfig } from 'unocss'
import { myPreset } from './my-preset'

export default defineConfig({
  presets: [
    myPreset, // 自分のプリセット
  ],
})

同様に、すぐに使用を開始できるいくつかの公式プリセットを提供しており、多くの興味深いコミュニティプリセットも見つけることができます。

プレイ

ブラウザでUnoCSSを試すことができ、Playgroundで試すことができます。また、インタラクティブドキュメントでデフォルトプリセットからユーティリティを調べることができます。

統合

UnoCSSは、さまざまなフレームワーク/ツールとの統合を提供します。

例

すべての例のソースコードは、/examples ディレクトリにあります。