スタイリングエンジン
m3-baseui は 2 つのスタイリングエンジンを提供します。React ロジックは
@m3-baseui/core に共通で、エンジン側はクラス解決器だけが異なります。
出力 DOM と data-* 属性は同一です。
比較
| Tailwind CSS v4 | vanilla-extract | |
|---|---|---|
| パッケージ | @m3-baseui/react-tailwind | @m3-baseui/react-vanilla-extract |
| 向いている場面 | アプリが Tailwind v4 を使う | VE recipes ベースのスタイル |
| CSS 要件 | preset + @source | tokens.css のみ |
| ビルド | @tailwindcss/vite | @vanilla-extract/vite-plugin |
import の切替
コンポーネント API は同一です。import パスだけ差し替えます。
import { Button, ThemeProvider } from '@m3-baseui/react-tailwind';import { Button, ThemeProvider } from '@m3-baseui/react-vanilla-extract';ツリーシェイキング向けにサブパス import も利用できます。
import { Button } from '@m3-baseui/react-tailwind/button';import { Dialog } from '@m3-baseui/react-tailwind/dialog';@otomatty/* からの移行
旧スコープから npm スコープが @m3-baseui/* に変更されています。
| 旧 | 新 |
|---|---|
@otomatty/react-tailwind | @m3-baseui/react-tailwind |
@otomatty/react-vanilla-extract | @m3-baseui/react-vanilla-extract |
@otomatty/tokens | @m3-baseui/tokens |
@otomatty/icons | @m3-baseui/icons |
このドキュメントサイトについて
公開ドキュメントのライブデモは Tailwind エンジン（@m3-baseui/react-tailwind）で描画しています。
vanilla-extract 版も同一 API・同一 DOM を出力します。drop-in 互換の詳細検証はローカルの Storybook を利用してください。