Wind4 preset

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

TIP

このドキュメントを読んで変更点を理解することをお勧めします

インストール

pnpmyarnnpmbun

bash

pnpm add -D @unocss/preset-wind4

bash

yarn add -D @unocss/preset-wind4

bash

npm install -D @unocss/preset-wind4

bash

bun add -D @unocss/preset-wind4

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

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

互換性

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

テーマ

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

WARNING

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

PresetWind3	PresetWind4
`fontFamily`	`font`
`fontSize`	`text`の`fontSize`プロパティに移動
`lineHeight`	`text`の`lineHeight`プロパティに移動、または`leading`を使用
`letterSpacing`	`text`の`letterSpacing`プロパティに移動、または`tracking`を使用
`borderRadius`	`radius`
`easing`	`ease`
`breakpoints`	`breakpoint`
`verticalBreakpoints`	`verticalBreakpoint`
`boxShadow`	`shadow`
-	`insetShadow`
`width`、`height`、`maxWidth`、`maxHeight`、`minWidth`、`minHeight`などのサイズプロパティ	`spacing`に統一
`transitionProperty`	`property`
`gridAutoColumn`、`gridAutoRow`、`gridColumn`、`gridRow`、`gridTemplateColumn`、`gridTemplateRow`	-
`container.maxWidth`	`containers.maxWidth`
-	`defaults`

`Theme.defaults`

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

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

デフォルト値を表示するにはクリック

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

export const defaults: Theme['defaults'] = {
  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では、リセットスタイルをtailwind4に合わせて内部に統合しています。@unocss/resetやnormalize.cssなどの追加のCSSリセットパッケージをインストールする必要はありません。

import '@unocss/reset/tailwind.css'
import '@unocss/reset/tailwind-compact.css'

スイッチを通じてリセットスタイルを有効にするかどうかのみを制御します：

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

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

ユーティリティリゾルバー

PresetWind4では、postProcessフックをアップグレードして、より簡潔なAPIを提供しています。プリセット内のutilitiesを直接カスタマイズできるようになりました。

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

import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      utilityResolver: createRemToPxResolver() 
    }),
  ],
})

より多くのリゾルバーセットをカスタマイズしてutilitiesを処理し、必要なCSSを出力することができます。

具体的な実装方法については、postProcessまたはpresetWind4テストケースを参照してください。

テーマプリフライト

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

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

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

生成されたCSS

PresetWind4の出力では、themeとcssvar-propertyの2つの新しいレイヤーが追加されています。

レイヤー名	説明	順序
`cssvar-property`	`@property`で定義されたCSSプロパティ	-200
`theme`	テーマ関連のCSS変数	-150

`cssvar-property`レイヤー

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

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

css

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

`theme`レイヤー

テーマ関連のCSS変数をthemeレイヤーに配置し、オーバーライドや直接使用を容易にしています。包括的またはオンデマンドにすることができます。常にテーマ設定から取得されます。

css

: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用に開発されたため、一緒に使用する際に問題が発生する可能性があります。既知の問題は以下の通りです：

presetWebFonts

presetWebFontsをPresetWind4と一緒に使用する場合、fontFamilyテーマキーはサポートされなくなりました。以下の調整を行ってください：

import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'

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

presetLegacyCompat

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

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

transformDirectives

transformDirectivesはPresetWind4と上手く動作しません。いくつかの既知の問題があるため、注意して使用してください。

WARNING

When using @apply to process rules that have @property, conflicts may occur between different layer levels.

Wind4 preset ​

インストール ​

互換性 ​

テーマ ​

Theme.defaults ​

オプション ​

リセットスタイル ​

ユーティリティリゾルバー ​

テーマプリフライト ​

生成されたCSS ​

cssvar-propertyレイヤー ​

themeレイヤー ​

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

presetWebFonts ​

presetLegacyCompat ​

transformDirectives ​

Wind4 preset

インストール

互換性

テーマ

`Theme.defaults`

オプション

リセットスタイル

ユーティリティリゾルバー

テーマプリフライト

生成されたCSS

`cssvar-property`レイヤー

`theme`レイヤー

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

presetWebFonts

presetLegacyCompat

transformDirectives