UnoCSSとは？

UnoCSSは、柔軟性と拡張性を備えた、即時的なアトミックCSSエンジンです。コアは非オピニオンであり、すべてのCSSユーティリティはプリセットを介して提供されます。

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

uno.config.ts

import { defineConfig } from 'unocss'

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

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

html

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

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

css

.m-1 { margin: 1px; }

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

uno.config.ts

diff

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

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

html

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

css

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

プリセット

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

my-preset.ts

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: [/* ... */],
  // ...
}

uno.config.ts

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

export default defineConfig({
  presets: [
    myPreset, // your own preset
  ],
})