Wind4 プリセット

UnoCSS 用の Tailwind4 CSS コンパクトプリセットです。PresetWind3 のすべての機能と互換性があり、さらに強化されています。

ソースコード

::: tip このドキュメントを少し読むことで、変更点を理解することができます。 :::

インストール

::: code-group

pnpm add -D @unocss/preset-wind4

yarn add -D @unocss/preset-wind4

npm install -D @unocss/preset-wind4

bun add -D @unocss/preset-wind4

:::

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    //  ^?
  ],
})

互換性

ブラウザのサポートと互換性については、Tailwind Compatibility を参照してください。

テーマ

PresetWind4 のテーマは PresetWind3 のテーマとほぼ同じですが、一部のテーマキーが調整されています。

::: warning PresetWind4 に切り替える際は、以下の表を参照してテーマキーの設定を確認し、適切に調整してください。 :::

Theme.defaults

Theme.defaults は、reset スタイルに適用されるグローバルなデフォルトテーマ設定であり、特定のルールのデフォルト値として使用されます。

以下は Theme.defaults のデフォルト値で、テーマ設定で上書きすることができます。

import type { Theme } from '@unocss/preset-wind4/theme'

export const defaults: Theme['default'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    featureSettings: 'var(--font-mono--font-feature-settings)',
    variationSettings: 'var(--font-mono--font-variation-settings)',
  },
}

オプション

PresetWind4 の基本設定は PresetWind3 と似ていますが、以下の重要な変更があります。

プリフライト

PresetWind4 では、プリセットスタイルを有効にするかどうかを制御するために preflights 設定オプションを追加しました。

リセット

PresetWind4 では、リセットスタイルを tailwind4 と一致させ、内部に統合しています。@unocss/reset や normalize.css のような追加の CSS リセットパッケージをインストールする必要はありません。

import '@unocss/reset/tailwind.css' // [!code --]
import '@unocss/reset/tailwind-compat.css' // [!code --]

リセットスタイルを有効にするかどうかはスイッチで制御するだけです：

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: { // [!code ++]
        reset: true, // [!code ++]
      } // [!code ++]
    }),
  ],
})

テーマ

テーマの CSS 変数を生成する方法を選択します。

モード

presetWind4 をインストールした UnoCSS エンジンは、ユーティリティを解析する際にテーマへの依存関係を自動的に収集し、最後に CSS 変数を生成します。

• true: テーマキーを完全に生成します。
• false: テーマキーを無効にします。（推奨されません ⚠️）
• 'on-demand': 使用時にのみテーマキーを生成します。 -> ✅ （デフォルト）

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: { // [!code ++]
        theme: true, // [!code ++]
      }, // [!code ++]
    }),
  ],
})

プロセス

テーマ変数の出力をさらに制御することができます。例えば、テーマ変数の rem を px に変換したい場合、createRemToPxProcessor 関数を提供してテーマ変数を処理します。

import { createRemToPxProcessor } from '@unocss/preset-wind4/utils' // [!code ++]
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: { // [!code ++]
        theme: { // [!code ++]
          mode: 'on-demand', // デフォルトは 'on-demand' // [!code ++]
          process: createRemToPxProcessor(), // [!code ++]
        } // [!code ++]
      }, // [!code ++]
    }),
  ],
})

ちなみに、presetRemToPx プリセットを使用して rem を px に変換したい場合、presetWind4 がこの機能を内部で提供しているため、別途このプリセットをインポートする必要はありません。

import { createRemToPxProcessor } from '@unocss/preset-wind4/utils' // [!code ++]
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: { // [!code ++]
        theme: { // [!code ++]
          process: createRemToPxProcessor(), // [!code ++]
        } // [!code ++]
      }, // [!code ++]
    }),
  ],
  postprocess: [createRemToPxProcessor()], // [!code ++]
})

プロパティ

properties レイヤーで @property CSS ルールの生成を制御します。

デフォルトでは、PresetWind4 はブラウザの最適化を向上させるために @property を使用して CSS カスタムプロパティを定義します。これらのプロパティは、ユーティリティの使用に基づいて自動的に生成され、プログレッシブエンハンスメントのために @supports クエリでラップされます。

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: {
        property: true, // 有効化（デフォルト）| `false` で無効化 [!code ++]
      },
    }),
  ],
})

親とセレクタ

親ラッパーとセレクタをカスタマイズできます：

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: {
        property: {
          // カスタム親セレクタ（例：@layer を @supports の代わりに使用）
          parent: '@layer custom-properties',
          // プロパティを適用するためのカスタムセレクタ
          selector: ':where(*, ::before, ::after)',
        },
      },
    }),
  ],
})

@supports ラッパーを使用せず、プロパティを直接適用したい場合：

import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      preflights: {
        property: {
          parent: false, // 親ラッパーなし
        },
      },
    }),
  ],
})

デフォルトの出力：

@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
  ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
  *,
  ::before,
  ::after,
  ::backdrop {
    --un-text-opacity: 100%;
    /* ... */
  }
}

parent: false の場合：

*,
::before,
::after,
::backdrop {
  --un-text-opacity: 100%;
  /* ... */
}

生成された CSS

PresetWind4 の出力には、新たに base、theme、properties の3つのレイヤーが追加されました。

properties レイヤー

多くのルールで @property を使用して CSS プロパティを定義し、より良いパフォーマンスと小さなサイズを実現しています。

例えば、text-op-xx、bg-op-xx などの一般的なユーティリティ。

@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

theme レイヤー

テーマ関連の CSS 変数を theme レイヤーに配置し、上書きや直接使用を容易にしています。 包括的またはオンデマンドであり、常にテーマ設定から来ます。

::: info 生成されたキー名は Tailwind4 と完全に同じではないかもしれません。presetWind3 から移行するユーザーを尊重するため、テーマのキー名に大きな変更を加えないようにしています。 プリフライトテーマプロセス で出力をカスタマイズすることもできます。 :::

:root,
:host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

他のプリセットとの互換性

PresetWind4 は PresetWind3 を強化し、互換性があります。他のパッケージは元々 PresetWind3 用に開発されているため、一緒に使用する際にいくつかの問題が発生する可能性があります。既知の問題には以下が含まれます：

presetRemToPx

presetRemToPx は PresetWind4 では内部に既に含まれているため、もはや必要ありません。設定から削除することができます。

オプションの process オプションを参照してください。

presetLegacyCompat

presetWind4 では、より良い色のコントラストと色の認識をサポートするために oklch カラーモデルを使用しています。そのため、presetLegacyCompat とは互換性がなく、一緒に使用することは推奨されません。

詳細については、互換性 セクションを参照してください。