💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

プロローグ — CSSはもう「単なるスタイル」ではない

2010年代のCSSは「デザインカンプをピクセルに移す道具」だった。2020年代前半、Tailwindがその定義を「ユーティリティの組み合わせ」に書き換えた。そして2026年、CSSはもう一度姿を変えた。

- **Tailwind CSS v4.0**(2025年1月正式リリース)がRustベースの **Oxide エンジン** を引っ提げ、ビルド時間が v3 比で平均 **100倍速く** なった。CSS-first config(`@theme` ディレクティブ)、ネイティブ・カスケードレイヤー、oklch 色空間がデフォルトになった。

- **shadcn/ui** は npm パッケージではなく **CLI でコンポーネントのソースをコピーしてくる** 方式を標準にした。Radix UI プリミティブ + Tailwind クラス = 自分のコード。2026年の React 生態系で最も使われるコンポーネントライブラリだ。

- **Chakra UI v3** は Ark UI の上に書き直された。v2 の emotion ランタイム依存を捨て、Panda CSS のビルドタイムに移った。RSC と相性が良い。

- **Mantine 7** は css-in-js を捨て、**CSS Modules + PostCSS** に回帰した。「ランタイム 0」が2026年のコンポーネントライブラリの標語になった。

- ネイティブ CSS はもう弱くない。**コンテナクエリ · View Transitions API · アンカー・ポジショニング · `:has()` セレクタ · `@layer` · `color-mix()` · oklch** は2026年すべて Baseline だ。

本稿はこの風景全体を1呼吸でまとめる。最初の utility class 1行から、デザイントークン · アクセシビリティ・プリミティブ · ビルドタイム CSS-in-JS · マルチフレームワーク UI ライブラリまで。そしてその間で「どこで何の道具を使うか」を決めるマトリクスまで。

第1章 · 2026年のCSS風景 — 1枚の地図

まずは絵を1枚。道具を知る前に、道具が **どこに位置するか** から見るべきだ。

[ デザイントークン / 変数 ]

Open Props · CSS Variables · Tokens Studio

[ CSS の書き方 ]

┌──────────────┬──────────────┬───────────────┐

│ Utility-first│ CSS Modules │ CSS-in-JS │

│ (Tailwind) │ (Mantine 7) │ (build-time: │

│ (UnoCSS) │ (Pure CSS) │ Panda·VE) │

│ │ │ (runtime: │

│ │ │ Emotion· │

│ │ │ styled-comp) │

└──────────────┴──────────────┴───────────────┘

[ コンポーネントレイヤー ]

┌──────────────┬──────────────┬───────────────┐

│ Unstyled │ Themed │ Opinionated │

│ Primitives │ Components │ Design System │

│ Radix · Ark │ shadcn/ui │ MUI · AntD · │

│ HeadlessUI │ HeroUI · │ Mantine · │

│ Bits · Melt │ DaisyUI │ Chakra v3 │

└──────────────┴──────────────┴───────────────┘

[ ビルドパイプライン ]

PostCSS · Lightning CSS · Vite · Turbopack

── ブラウザ ──

この地図のどの行を誰が担うかが、そのままスタック選択の基準になる。

- **トークンレイヤー** — 色 · 間隔 · タイポの単一の真実。Open Props が「フレームワーク非依存のトークン」標準になりつつある。

- **書き方** — ユーティリティ(Tailwind)、スコープ(CSS Modules)、コンパイルタイム(Panda · VE)の3つの道。

- **コンポーネントレイヤー** — スタイル無しプリミティブ(Radix)、コピーペースト(shadcn)、フルデザインシステム(MUI · AntD)。

- **ビルドパイプライン** — Lightning CSS が PostCSS を速く置き換えつつある。

覚えておく一文: **「2026年の CSS スタックは1つのライブラリではない。4つのレイヤーだ。」**

第2章 · Tailwind CSS v4 — Oxide エンジンと CSS-first 設定

まず数字から。Tailwind は2026年5月時点で npm 週間 **2,400万ダウンロード以上**、GitHub スター **85k 以上** — utility-first CSS の事実上の標準だ。v4.0(2025年1月正式リリース)が何を変えたかを1行で言えば、**「Rust エンジン · CSS-first 設定 · ネイティブ・カスケードレイヤー」** の3つだ。

最小設定。v3 と比べると単純さが見える。

/* app/globals.css — v4 流の設定 */

@import "tailwindcss";

@theme {

--color-brand: oklch(0.7 0.15 250);

--font-display: "Inter", sans-serif;

--spacing-4-5: 1.125rem;

}

@layer components {

.btn-brand {

@apply rounded-md bg-brand px-4 py-2 text-white;

}

`tailwind.config.js` が消えた。すべての設定が CSS の中に `@theme` ディレクティブとして入る。JS ファイルを別に置く v3 方式も互換モードで動作するが、新規プロジェクトでは CSS-first が推奨だ。

**Oxide エンジン** の効果は数字で明確だ。Tailwind チーム・ベンチマーク基準:

- フルビルド: v3 比 **3.5倍速い**

- 増分ビルド(1文字だけ変えた場合): v3 比 **100倍以上速い**、通常 5ms 以下

- 最初のビルド(1万ファイル走査): v3 の 1.5 秒 → v4 の 0.1 秒

加えて:

- **コンテンツ自動検出** — `content: []` 設定が不要。Tailwind が自分でファイルツリーを走査する。

- **CSS 変数として全トークン公開** — `var(--color-blue-500)` のようにランタイムで利用可能。

- **コンテナクエリ1級サポート** — `@container`、`@sm:`、`@md:` などのバリエーション。

- **`@starting-style` · トランジション拡張** — 新しい CSS API が utility として自然に入る。

移行コストは小さくない。`npx @tailwindcss/upgrade` がほとんどの変換を肩代わりしてくれるが、`bg-opacity-50` 式の v3 パターンが `bg-blue-500/50` のスラッシュ記法に強制変換されるなど手のかかる部分はある。

第3章 · Tailwind UI / Tailwind Plus — 有償コンポーネントの重み

Tailwind チームが直接作る有償コンポーネント集が2025年後半に「Tailwind UI」から **「Tailwind Plus」** にリブランドされた。1回の購入で永久利用というライセンスは変わらない。

2026年時点の構成:

- **Tailwind Plus UI Blocks** — 500以上のマーケティング · アプリケーション · EC ブロック(以前の Tailwind UI)

- **Tailwind Plus Templates** — Spotlight · Studio · Pocket · Salient などの Next.js · Astro フルテンプレート

- **Tailwind Plus UI Kit** — Figma · Sketch · Adobe XD のデザインキット

- **Catalyst** — React コンポーネントライブラリ(コードコピー方式、shadcn 流儀に近い)

shadcn/ui が無料 · オープンソースで同じ領域を取りに行く中、Tailwind Plus は「デザイナー水準の仕上げ」と「Tailwind チームが自ら作る一貫性」の2点で差別化する。チーム規模で時間を節約できるなら価値は明確だが、ソロ開発者には shadcn で足りる場面が多い。

第4章 · shadcn/ui — ライブラリではなくコピーペースト

shadcn/ui は2026年の React 生態系で最も重要なコンポーネントライブラリだ。それでいて npm にパッケージが「ない」。正確には `shadcn` CLI パッケージはあるが、コンポーネント本体は **あなたのプロジェクトにコピーされる。**

初期化 — components.json を生成

npx shadcn@latest init

Button コンポーネントを追加 — components/ui/button.tsx にコピーされる

npx shadcn@latest add button

一度に複数

npx shadcn@latest add dialog dropdown-menu tooltip

コピー後の `button.tsx` は1行残らずあなたのコードだ。デザインが変わるならそのファイルを直接編集する。依存性アップグレードなど存在しない。

なぜこのモデルが勝ったのか?

1. **バージョン縛りが無い** — ライブラリが更新されても壊れない。自分のコードだから。

2. **カスタマイズが自由** — Tailwind クラスを直接いじれば終わり。テーマ・オーバーライドの裏道が要らない。

3. **Tree-shaking が完璧** — 追加していないコンポーネントはプロジェクトに存在しない。

4. **TypeScript が1級市民** — すべてのコンポーネントが TS で書かれ、推論が完全。

5. **Radix UI の上にいる** — アクセシビリティ · キーボード操作 · ARIA はすべて検証済み。

ライセンスは MIT。Radix UI 依存も MIT。「AGPL の懸念」は誤情報(過去の v0/Vercel 関連の混乱)だった。商業プロジェクトで自由に使える。

ブロックカタログに含まれる50以上のフルページ例は、カードグリッド、ダッシュボード、フォーム、チャート、サイドバー、ログインページなどを含む。それをそのまま持ってきてテキストを入れ替えるだけで管理画面の9割が完成する。

第5章 · Radix UI / Radix Themes 3 — アクセシビリティ・プリミティブの標準

Radix UI は2系統に分かれる。

- **Radix Primitives** — スタイル無しのアクセシブルなコンポーネント(`@radix-ui/react-dialog`、`@radix-ui/react-dropdown-menu` など)

- **Radix Themes** — スタイル付きのコンポーネント(2025年12月に v3 リリース)

shadcn/ui が Primitives を上から包む形で使う一方、Radix Themes 3 は「そのまま使える」スタイル済みコンポーネントを提供する。v3 の変更点:

- **CSS Variables ベースのテーマ** — 角丸、スケール、コントラストをランタイムで変更可能。

- **ダークモード1級サポート** — `<Theme appearance="dark">` の1行。

- **新規コンポーネント** — `Spinner`、`SegmentedControl`、`DataList`、`ColorPicker` など。

- **バンドルサイズ削減** — v2 比約30%減。

Primitives 単体で使う利点は明確だ。キーボードトラップ、フォーカス管理、ARIA ロール、スクリーンリーダー互換を自分で実装しなくて済む。Dialog 1つだけでも `onOpenChange`、`modal`、`defaultOpen`、フォーカストラップ、スクロールロックが入っている。これをゼロから書くのは1か月仕事だ。

// Radix Primitives — スタイルは自前

第6章 · Mantine 7 — フルスタック React UI の1軸

Mantine は2022年の v5 では emotion ベースだったが、**v7 で CSS Modules + PostCSS に完全に移行した。** 2026年5月時点で v7.13 が安定版で、ランタイム CSS-in-JS は完全に消えている。

中核価値:

- **120以上のコンポーネント** — Button、Input から RichTextEditor、Carousel、DataTable、Spotlight まで。

- **`@mantine/hooks`** — 70以上のユーティリティフック。`useDisclosure`、`useDebouncedValue`、`useIntersection` など。

- **`@mantine/form`** — 強力なフォームライブラリ。Zod · Yup 連携。

- **`@mantine/notifications`** — トースト通知システム。

- **`@mantine/modals`** — モーダルマネージャ(useState の定型句なしで呼び出し可能)。

- **`@mantine/dates`** — 日付ピッカー、カレンダー。

- **`@mantine/charts`** — Recharts ベースのチャートコンポーネント。

shadcn/ui と比べた Mantine の位置:

| 項目 | shadcn/ui | Mantine 7 |

|------|----------|-----------|

| インストール方式 | コピーペースト | npm パッケージ |

| スタイル | Tailwind | CSS Modules |

| カスタマイズ | ソース直接編集 | テーマオブジェクト + className |

| コンポーネント数 | 50+ | 120+ |

| フォーム · チャートなど統合 | 別ライブラリ | 1級パッケージ |

| RSC 互換 | 部分(クライアントコンポーネント中心) | 部分(`'use client'` 必要) |

| バンドル影響 | 使った分のみ | Tree-shaking が機能 |

Mantine は「必要なものが1つの箱に入っているべき」と考えるチームに合う。shadcn は「基本ブロックだけあって残りは自分で書く」というチームに合う。

第7章 · Chakra UI v3 — Ark UI の上に書き直したライブラリ

Chakra UI は2024年末に v3 で大きなリファクタを断行した。最大の変更:

- **Ark UI の上にコンポーネント再構築** — マルチフレームワーク(React · Solid · Vue)で同じ挙動を保証。

- **スタイルを Panda CSS のビルドタイムに移行** — emotion ランタイム依存を削除。

- **レシピシステム** — バリアントを型安全に定義。

- **JSX パターン** — `<Stack>`、`<Grid>`、`<Wrap>` のようなレイアウトコンポーネントが1級。

// Chakra UI v3 — スニペット例

v2 → v3 移行は大仕事だ。`colorScheme` → `colorPalette`、theme オブジェクト構造の変更、Provider の変更など、ほぼ全てのコンポーネント呼び出しに影響する。v2 の大きなコードベースを持つチームは段階的移行ガイドに従う必要がある。

2026年時点での Chakra v3 の位置は「Mantine に似たフルライブラリだが、Panda CSS · Ark UI 連携でマルチフレームワークの未来を開いている選択肢」だ。

第8章 · HeadlessUI 2 · Ark UI · Park UI — プリミティブの多極化

Radix UI 1つで終わらない。

**HeadlessUI 2**(Tailwind Labs)

- Tailwind チーム直製、Tailwind スタイルに最も自然に馴染む。

- React · Vue 対応。

- v2 でアンカー・ポジショニング、render prop の改善。

- Radix よりコンポーネント数が少ない(Combobox、Dialog、Disclosure、Listbox、Menu、Popover、Switch、Tabs)。

- Tailwind だけ使うなら Radix より軽く選べる。

**Ark UI**

- Zag.js(ステートマシン)の上のマルチフレームワーク・プリミティブ — React · Vue · Solid を同じコードベースで。

- Chakra チーム(Segun Adebayo)の作品。

- コンポーネント数が50を超え、Radix より広い。

- 「フレームワークに縛られないコンポーネントロジック」を求めるなら第一候補。

**Park UI**

- Ark UI 上のデザインシステム — Panda CSS と統合。

- shadcn のようにコピーペースト方式。

- 「Ark UI + Panda CSS + デザイントークン」を統合した経験。

**Bits UI · Melt UI**(Svelte)

- Svelte 生態系の Radix 相当。

- Melt UI が低レベル・ビルダー、Bits UI がその上にコンポーネント API を載せた形。

第9章 · Open Props — フレームワーク非依存のトークン

Adam Argyle(Chrome DevRel)が作った **Open Props** は「すべての CSS 変数があらかじめ定義されたトークンライブラリ」だ。1行の import で、デザインシステム全体に使える変数が入ってくる。

@import "https://unpkg.com/open-props";

@import "https://unpkg.com/open-props/normalize.min.css";

.card {

padding: var(--size-4);

border-radius: var(--radius-3);

box-shadow: var(--shadow-3);

background: var(--surface-2);

color: var(--text-1);

font-size: var(--font-size-2);

}

@media (prefers-color-scheme: dark) {

/* 自動ダークモード — Open Props normalize が処理 */

}

長所:

- **フレームワーク非依存** — Tailwind とも、CSS Modules とも、vanilla CSS とも一緒に使える。

- **よく設計された段階** — 色18色 × 12段階、サイズ 0-15、角丸 1-5、影 1-6、フォントサイズ 00-8 など一貫したスケール。

- **ダークモード自動化** — `normalize.css` が `prefers-color-scheme` を処理。

- **段階的採用** — 一部のトークンだけ拝借しても良い。

2026年の Open Props は2つに分かれている。

- **Open Props (CSS)** — オリジナル。CSS 変数の束。

- **Open Props for Tailwind** — Tailwind v4 の `@theme` でインポートできるバリアント。

小さなサイト、ライブラリのデモ、トークンだけ借りたい大型プロジェクト、すべてに適する。

第10章 · UnoCSS — 即時オンデマンド・アトミック CSS

UnoCSS は Anthony Fu(Vue · Vite コアメンバー)が作ったアトミック CSS エンジンだ。2026年5月時点で v0.65 が安定版で、Vue · React · Svelte · Solid どこでも動く。

中核コンセプト:

- **プリセット(preset)ベース** — Tailwind 互換、Wind、UnoCSS デフォルト、attributify、icons など。

- **即時ビルド** — JIT より速いオンデマンド生成。

- **icons preset** — `i-mdi-home` の1クラスで10万以上のアイコンをインライン SVG として。

- **インスペクタ・ツール** — どのクラスがどの CSS を生むかを可視化。

// uno.config.ts

export default defineConfig({

presets: [

presetUno(),

presetAttributify(), // bg="blue-500" のような attributify モード

presetIcons({ scale: 1.2 }), // i-mdi-home、i-tabler-user など

theme: {

colors: { brand: '#0ea5e9' },

})

Tailwind v4 と比較:

| 項目 | Tailwind v4 | UnoCSS |

|------|-------------|--------|

| エンジン | Rust (Oxide) | TS、Vite 互換 |

| ビルド速度 | 非常に速い | 非常に速い |

| プリセット | 単一統合 | モジュール式 |

| 属性モード | 無し | `<div bg="blue-500" />` |

| アイコン | 別途 | preset 統合 |

| 生態系 | 圧倒的 | 小さいが急成長 |

| Next.js 統合 | 1級 | Vite 中心、Next プラグイン有り |

Vite · Astro · Nuxt プロジェクトでは UnoCSS の方が自然なことが多い。Next.js 13+ なら Tailwind v4 の方が楽。

第11章 · Panda CSS — ビルドタイム CSS-in-JS の模範

Panda CSS は Chakra UI チームが作った **ビルドタイム CSS-in-JS** ライブラリだ。emotion · styled-components のようなランタイム CSS-in-JS の弱点(バンドルサイズ、RSC 非互換)を解決しつつ、型安全なトークン · レシピ · パターンを保つ。

// panda.config.ts

export default defineConfig({

preflight: true,

include: ['./src/**/*.{ts,tsx}'],

theme: {

tokens: {

colors: {

brand: { value: 'oklch(0.7 0.15 250)' },

recipes: {

button: {

base: { px: '4', py: '2', rounded: 'md' },

variants: {

variant: {

solid: { bg: 'brand', color: 'white' },

outline: { borderWidth: '1px', borderColor: 'brand' },

})

// 使用

長所:

- **ビルドタイム抽出** — ランタイム0。バンドルに emotion が入らない。

- **型安全** — トークン · レシピ · バリアントがすべて自動生成された型で保護される。

- **JSX パターン** — `<Stack>`、`<Grid>` のようなレイアウトコンポーネント。

- **多フレームワーク** — React · Solid · Vue · Preact · Qwik · Astro。

Chakra UI v3 が Panda の上に乗ったことが、最大の検証だ。

第12章 · Vanilla Extract — TypeScript CSS のもう1つの道

Vanilla Extract は Seek チームが作った **TypeScript で書く CSS** だ。`.css.ts` ファイルに TypeScript で CSS オブジェクトを書くと、ビルド時に静的 CSS ファイルが抽出される。

// button.css.ts

export const base = style({

padding: '0.5rem 1rem',

borderRadius: '0.375rem',

})

export const variants = styleVariants({

solid: { background: 'blue', color: 'white' },

outline: { border: '1px solid blue', color: 'blue' },

})

長所:

- **ランタイム0** — ビルド結果は静的 CSS。

- **CSS-in-JS の型安全性** — トークン · クラス名の自動推論。

- **RSC 完全互換** — クライアントバンドルにライブラリコードが入らない。

- **Stitches 流の variants API** — `recipe()` ヘルパーが別パッケージとして。

Panda CSS と比べると Vanilla Extract は「より小さく、より明示的で、デザインシステムよりコンポーネント・スタイルに集中する」。Panda はデザイントークン · レシピ · プリセットが1級、VE はそれが別パッケージ(Sprinkles、Recipes)。

第13章 · CSS-in-JS の黄昏 — Emotion · styled-components · Stitches

2020-2023年の React 生態系の半分以上が使っていた emotion · styled-components が、2026年には急速に減りつつある。理由は3つだ。

1. **React Server Components 非互換** — emotion がクライアントコンポーネントを強制し、シリアライズに不自然なパターンを作る。

2. **バンドルサイズ** — emotion 11 が約13KB(gzip)、styled-components 6 が約12KB。小さなサイトには重い。

3. **ビルドタイム CSS-in-JS の成熟** — Panda · Vanilla Extract · Linaria が同じ DX をランタイム0で提供する。

**Stitches** は2023年以降、事実上メンテナンスが止まった。**styled-components** は2024年に「deprecated」と宣言されたわけではないが、新規プロジェクトには推奨しないというコアチームのメッセージが出た。

既存の emotion · styled-components コードベースの移行経路:

- **emotion + Chakra v2** → **Panda CSS + Chakra v3**

- **styled-components 一般** → **Tailwind / CSS Modules / Panda**

- **Stitches** → **Vanilla Extract / Panda** (variants API が最も近い)

新規プロジェクトなら2026年にランタイム CSS-in-JS を選ぶ理由はほぼ無い。

第14章 · DaisyUI · Flowbite · HeroUI · NextUI — Tailwind の上のコンポーネント

Tailwind は utility-only だが、その上に「名前のあるコンポーネント」を載せるライブラリが3系統で育っている。

**DaisyUI**

- Tailwind プラグイン。クラス名が意味ベース(`btn`、`card`、`modal`)。

- 30以上のビルトインテーマ。ダークモードは1行。

- コンポーネントがクラス合成マクロ。JS · React 依存なし。

- HTML/CSS のみのプロジェクトに最も合う。

**Flowbite**

- Tailwind の上の React · Vue · Svelte コンポーネント。

- マーケティングページのブロックが多い。

- 無料 + プロ版(ブロック追加)。

**HeroUI**(旧 NextUI v2)

- NextUI が2025年に HeroUI へリブランディング。

- semantically-named React UI — `<Button color="primary" variant="solid">` の流儀。

- Tailwind v4 互換モード有り、内部スタイルは vanilla CSS に移行中。

**NextUI v1**

- メンテナンス事実上終了。HeroUI への移行推奨。

shadcn/ui が「コピーペースト」なら、HeroUI は「パッケージ import」だ。デザインは両方ともモダン、選択は「自分のコードとして持ちたいか、ライブラリにコントロールを任せるか」の違い。

第15章 · MUI v6 · Material UI · Joy UI — Material デザイン陣営

**MUI v6**(2024年11月)がメインライン。Material Design 3(Material You)の部分対応、CSS variables モード、Pigment CSS(独自のビルドタイム CSS-in-JS)連携が中心の変化だ。

- **`@mui/material`** — Material Design コンポーネント。

- **`@mui/joy`** — Material から外れたモダンな代替。より軽量、CSS variables ベース。

- **`@mui/x`** — DataGrid、Date Pickers、Charts、Tree View などの Pro/Premium 有償コンポーネント。

2026年の MUI の位置は「エンタープライズ React UI の検証された選択」だ。弱点は:

- バンドルサイズが大きい(`@mui/material` 約280KB minified、80KB gzip)。

- emotion ランタイム依存(Pigment CSS に移行中だが進行形)。

- デザインが「Material っぽい」 — ブランド色の強いサイトには合いにくい。

エンタープライズ · 管理画面 · 社内ツールでは依然として強いが、新しいコンシューマー製品では shadcn · HeroUI · Mantine が選ばれることが多くなった。

第16章 · Ant Design 5 — 中国発 React UI の標準

Ant Design は Alibaba 発の React UI ライブラリだ。中国市場では事実上の標準であり、グローバルでも企業の管理画面で多く使われる。

v5(2022年末)の大きな変化:

- **CSS-in-JS** — emotion → 自前の cssinjs ライブラリ。v6 ロードマップでビルドタイム化の議論中。

- **デザイントークン** — トークンベースのテーマ・カスタマイズ。

- **グローバル・ダークモード** — `algorithm: theme.darkAlgorithm`。

- **Pro Components** — `@ant-design/pro-components` で管理画面パターン(LayoutPro、TableForm など)を別途提供。

長所はコンポーネント数と管理画面シナリオへの適合性だ。Form、Table、Tree、Transfer、Mentions、DatePicker.RangePicker のような複雑なコンポーネントが箱から出して動く。ただし:

- デザインが強く「Ant Design らしい」雰囲気をまとう。ブランドサイトにそのまま使うと違和感。

- バンドルサイズが大きい。

- i18n · ロケール — 韓国語・日本語ともサポート。

大きな管理画面構築では最速の道になることがある。

第17章 · Vue · Svelte · Solid 陣営 — マルチフレームワークの風景

React だけがすべてではない。

**Vue**

- **Vuetify 3** — Material Design Vue、2026年最大の Vue UI。

- **Quasar 2** — Vue クロスプラットフォーム — Web · モバイル(Cordova/Capacitor)· デスクトップ(Electron · Tauri)を1つのコードで。

- **Element Plus** — Element UI の Vue 3 ポート。中国発の管理画面強者。

- **PrimeVue** — PrimeFaces ファミリー。コンポーネント数が多く、テーマが豊富。

- **Naive UI** — TS-first のモダン Vue UI。

**Svelte**

- **Skeleton UI** — Svelte + Tailwind のフルデザインシステム。

- **Bits UI / Melt UI** — Svelte の Radix 相当。

- **shadcn-svelte** — shadcn/ui の Svelte ポート。

**Solid**

- **Solid UI** — shadcn 流のコピーペースト・コンポーネント。Kobalte の上にいる。

- **Kobalte** — Solid の Radix 相当。Ark UI と同等。

**フレームワーク非依存**

- **PrimeReact · PrimeNG · PrimeVue · PrimeFlex** — PrimeTek の同一デザインを React · Angular · Vue で。

- **Yamada UI** — 日本の開発者が作った React UI ライブラリ。Chakra · Mantine と似た領域。

第18章 · クラシック · ミニマル · クラスレス CSS

すべてのプロジェクトが Tailwind + 重いコンポーネントを必要とするわけではない。

**Pico CSS**

- クラスレス — `<button>`、`<input>` だけでもきれいに出る。

- 10KB(gzip)以下。

- ダークモード自動。

- ドキュメント · ブログ · 小さなサイトに即効性。

**Bulma**

- 純粋 CSS — JS · React 依存無し。

- クラスベースのコンポーネント(`.button`、`.card`、`.notification`)。

- 2026年も活発に保守。

**Pure CSS**

- Yahoo 出身、約4KB のミニマル・コンポーネント集。

- ほぼクラシック・ライブラリ — 安定。

**Tachyons**

- Tailwind 以前のアトミック CSS — `pa3 ba br3 b--silver`。

- Tailwind v4 が事実上吸収したが、小さなコードベースでは今も見かける。

**Modern CSS Reset · sanitize.css · normalize.css · 新しい "Open Props" reset**

- Reset ライブラリは2026年も健在。

- Tailwind は自前の `preflight` で済ますが、vanilla CSS プロジェクトでは modern-css-reset(Andy Bell)が標準に近い。

ミニマル・サイト、コンテンツ・サイト、1週間プロトタイプに向いている。「Tailwind まで行かなくて良い」領域は確かに存在する。

第19章 · 2026年のネイティブ CSS — フレームワーク無しで可能になったもの

2026年5月時点で Baseline 入り(またはほぼ)した主なネイティブ CSS 機能:

**1. コンテナクエリ**

.card {

container-type: inline-size;

}

@container (min-width: 400px) {

.card-content { display: grid; grid-template-columns: 1fr 2fr; }

}

メディアクエリはビューポート基準、コンテナクエリは親コンテナ基準。サイドバー · カード · ウィジェットで決定的だ。

**2. View Transitions API**

::view-transition-old(root),

::view-transition-new(root) {

animation-duration: 0.3s;

}

document.startViewTransition(() => updateDOM())

ページ/ビュー遷移を CSS アニメーションで。Next.js 15、Astro 5、Nuxt 4 がすべて内蔵サポート。

**3. `:has()` セレクタ**

/* 子要素に .error を持つ form だけ */

form:has(.error) { border-color: red; }

CSS 初の「親セレクタ」。JavaScript なしで可能なパターンが一気に増えた。

**4. CSS Nesting**

.card {

padding: 1rem;

& .title { font-weight: bold; }

&:hover { background: oklch(0.95 0.02 250); }

}

Sass を必要としない最大の理由。Tailwind v4 が内部で活用。

**5. Cascade Layers (`@layer`)**

@layer reset, base, components, utilities;

@layer components { .btn { } }

@layer utilities { .text-red { } }

特異性(specificity)戦争の終わり。Tailwind v4 が1級市民として採用。

**6. `color-mix()` · oklch**

:root { --brand: oklch(0.7 0.15 250); }

.btn { background: var(--brand); }

.btn:hover { background: color-mix(in oklch, var(--brand) 80%, white); }

oklch は知覚的均一性が sRGB より遥かに良い。Tailwind v4 がデフォルト色空間として採用。

**7. アンカー・ポジショニング**

.tooltip {

position-anchor: --my-button;

position-area: top span-all;

}

JS 無しで Floating UI 代替。Chrome 125+ サポート、Firefox/Safari が追従中。

**8. Popover API**

JS 無しでモーダル · ポップオーバー · メニュー。キーボードトラップ · ESC · バックドロップが自動。

これらの機能のおかげで「フレームワーク無しで書く CSS」の領域が復活した。小さなサイトは Tailwind + モダン CSS だけで十分豊かだ。

第20章 · ビルドツール — PostCSS · Lightning CSS · Sass の位置

CSS は依然としてビルドされる。2026年のパイプライン:

**Lightning CSS**(Devon Govett、Parcel チーム)

- Rust で書かれた CSS パーサ · トランスフォーム · ミニファイ。

- esbuild · Vite · Turbopack · Parcel 4 が内蔵またはオプションで採用。

- PostCSS より10-100倍速い。

- 自動 vendor prefix、ネスティングのトランスパイル、ミニファイをすべて含む。

- Tailwind v4 が内部で活用。

**PostCSS**

- 依然として広く使われるが、新規プロジェクトでは Lightning CSS 直接使用が多い。

- Autoprefixer · postcss-preset-env が主要プラグイン。

**Sass · LESS · Stylus**

- Sass は生き残った。変数 · ミックスイン · 関数が CSS 変数 · CSS 関数で十分になり、新規プロジェクトの採用は減ったが、大きなデザインシステムのコードベース(Material · Bootstrap)では依然として1級市民。

- LESS は Ant Design · 一部エンタープライズで健在。

- Stylus は事実上使用停止。

**CSS Modules**

- 標準 CSS のスコープ・ソリューションとして復活。Mantine 7、Next.js 15 が1級サポート。

- `.module.css` ファイルが自動でハッシュ化されたクラス名を生成。

新規プロジェクトの推奨パイプライン:

1. Vite · Next 15 · Astro 5(Lightning CSS 内蔵)

2. Tailwind v4(Oxide エンジン、Lightning CSS 活用)

3. コンポーネント単位の CSS Modules または Panda CSS

4. Sass は大きなデザインシステムが既にある場合のみ

第21章 · デザインシステム · トークン · Catppuccin · Rose Pine · Tokyo Night

カラーパレット · トークンはライブラリに縛られない。

**Tokens Studio**(旧 Figma Tokens)

- Figma プラグイン — デザイントークンを Figma で定義し、JSON でエクスポート。

- Style Dictionary で CSS · Tailwind · iOS · Android 形式に変換。

**Style Dictionary**(Amazon)

- トークン変換の標準ツール。JSON 1か所からすべてのプラットフォームへ。

**Open Props**

- 第9章参照。「既に良く整ったトークン束」をそのまま。

**カラースキーム · テーマコレクション**

開発者ツールから始まったが Web デザインにも豊かに使われるモダンなスキーム:

- **Catppuccin** — 4つのトーン(Latte · Frappé · Macchiato · Mocha) — VS Code · iTerm · Web、どこでも。

- **Rose Pine** — 柔らかいクラシックトーン(Main · Moon · Dawn)。

- **Tokyo Night** — 東京の夜景にインスパイアされたダーク。

- **Gruvbox**、**Nord**、**Dracula**、**Solarized** — クラシック。

これらのスキームは CSS 変数、Tailwind プラグイン、Figma ファイルを共に配布する。「自分の好きなトーン1行 import」でデザインシステムの色の部分を終えられる。

第22章 · 地域 UI ライブラリ — Toss · VARCO · Yamada

地域発の React UI ライブラリが2024-2026年に目立った。

**韓国**

- **Toss UI ライブラリ** — `@toss/use-funnel`、`@toss/react`、`@toss/utils` など。コンポーネント・ライブラリというより React ユーティリティの集合。Toss のプロダクションで検証されたパターン。

- **NCsoft VARCO デザインシステム** — ゲーム · エンターテインメント UX に特化。公開部分は一部だが、ダークなゲーム UI に適したトークン。

**日本**

- **Yamada UI** — 日本の開発者が作った React UI。Chakra · Mantine と似た領域、より軽量、ダークモードのトークンがよく整っている。

- **Ariakit** — Diego Haz(ブラジル人だが日本のエンジニアコミュニティで人気) — Radix の代替。

**中国**

- **Ant Design** — 第16章参照。

- **TDesign**(Tencent) — Material/Ant の中間のモダンなトーン。

- **Arco Design**(ByteDance) — デザインツール · ビジネスサイトに強い。

- **Semi Design**(Douyin) — モダンなトーン、RTL 対応。

地域ライブラリの強みは i18n · ロケール · フォント(漢字 · ハングル · かな)のディテールが最初から入っていることだ。

第23章 · 選択マトリクス — どの組み合わせが誰に合うか

全体を1つの表で:

|---------|---------|---------|------|

「ただ1つの正解」は無い。だが2026年5月で最も一般的な「デフォルト安全選択」は次だ。

- **コンシューマー Web** — Next 15 + Tailwind v4 + shadcn/ui + Radix UI。

- **ダッシュボード** — Next 15 + Tailwind v4 + Mantine 7、または shadcn + データ系コンポーネント。

- **エンタープライズ** — React 18+ + MUI v6 または AntD 5。

第24章 · アンチパターン12選

1. **Tailwind v4 と emotion を一緒に使う。** ランタイム依存を1行も追加する理由は無い。v3 から v4 への移行時に emotion から外せ。

2. **shadcn コンポーネント・ファイルを「絶対に修正しない」と決める。** そのモデル全体が修正可能を前提にしている。デザインが変わるならそのファイルを修正すれば終わりだ。

3. **Radix Primitives を使いながらキーボード・アクセシビリティを自分で再実装。** Radix が既に良くやってある。`asChild`、`onOpenChange`、フォーカストラップをそのまま活かせ。

4. **Mantine 7 を v6 のように emotion で使おうとする。** v7 は CSS Modules だ。移行ガイドに従って className パターンに移せ。

5. **Chakra v2 コードを v3 に自動変換可能と仮定する。** ほぼ全てのコンポーネント呼び出しが影響を受ける。段階的移行戦略を立てろ。

6. **MUI をマーケティングサイトにそのまま使う。** デザインが「Material っぽさ」を放つ。ブランドサイトなら Tailwind + shadcn の方がほぼ常に良い。

7. **AntD を i18n なしで英語プロジェクトに使う。** ConfigProvider の locale を設定しないと「ko_KR」のような既定値が漏れて入る。

8. **DaisyUI のテーマを30個全部有効化。** バンドルに全部入る。使う2-3個だけ。

9. **Open Props を部分 import して他のトークン・ライブラリと混ぜる。** 変数名の衝突が厄介。トークンソースを1つに決めろ。

10. **UnoCSS と Tailwind を1つのプロジェクトで同時使用。** クラス衝突 · 優先順位衝突が頻発する。1つだけ。

11. **Sass の変数と CSS 変数を混ぜて使う。** Sass 変数はビルドタイムに消え、CSS 変数はランタイム。ダークモードのような動的ケースは常に CSS 変数。

12. **`!important` で Tailwind に勝てると考える。** Tailwind v4 の `@layer utilities` が既に適切なカスケードを保証する。`!important` ではなく `@layer` の位置を調整しろ。

第25章 · チェックリスト — 新規プロジェクト開始時の14項目

1. **CSS の書き方を決定** — Tailwind v4 · CSS Modules · Panda · UnoCSS から1つ。

2. **コンポーネントレイヤーを決定** — Unstyled(Radix)· Themed(shadcn)· Full(Mantine · MUI · AntD)。

3. **トークンソースを決定** — Tailwind 内蔵 · Open Props · Tokens Studio + Style Dictionary。

4. **ダークモード戦略** — `prefers-color-scheme` 自動 vs トグル。

5. **コンテナクエリを活用 — カード · サイドバー** に適用。

6. **`@layer` 構造を定義** — `reset, base, components, utilities` のような順。

7. **CSS-in-JS はランタイム0か** — Panda · Vanilla Extract · Linaria。

8. **バンドル解析** — `next bundle-analyzer` などで CSS ライブラリのサイズを確認。

9. **アクセシビリティ検証** — axe-core、Lighthouse、Storybook a11y addon。

10. **i18n · RTL を考慮** — `dir="rtl"` 対応 — Tailwind v4 の logical properties を活用。

11. **View Transitions API を統合** — ルート変更のアニメーション。

12. **`color-mix()` · oklch で色システムを組む** — sRGB の代わりに。

13. **エッジケースのフォーム・コンポーネント** — Combobox · DatePicker · MultiSelect など。自作せずライブラリを使う。

14. **CI に視覚回帰テストを追加** — Chromatic · Percy · Playwright の視覚比較。

第26章 · まとめ — CSS は再び面白くなった

2020年代前半の風景は「Tailwind を使うか styled-components を使うか」という2陣営の争いだった。2026年は違う。

- ネイティブ CSS が十分に強くなった — コンテナクエリ、`:has()`、`@layer`、View Transitions、color-mix。

- Tailwind v4 が「答えのような utility-first 標準」の座を固めた。

- shadcn/ui が「ライブラリ == npm パッケージ」という等式を破った。

- Radix · Ark UI が「アクセシビリティ・プリミティブ」の標準を作った。

- Panda · Vanilla Extract が「ビルドタイム CSS-in-JS」の道を整えた。

- ランタイム CSS-in-JS は黄昏を迎えた。

- 地域ライブラリ(Toss · Yamada · TDesign)がグローバル多様性を高めた。

これらすべての道具に共通するのは1つだ。**「CSS を書く人が直接下す決定が減り、道具に任せる決定が増えた。」** トークンをどこに置くか、ダークモードをどうトグルするか、アクセシビリティを誰が責任を持つか、どのレイヤーで何が勝つか — 2026年の道具はこれらすべての質問に合理的なデフォルトを与える。

> 「フレームワークは答えではなく、良いデフォルトだ。良いデフォルトが増えた時代に、私たちはより上でデザインを決められるようになった。」

次回候補: **CSS Anchor Positioning 実践 — JS なしで Floating UI を置き換える**、**View Transitions API 完全ガイド — Next 15 · Astro 5 で**、**デザイントークン・パイプラインを作る — Figma → Style Dictionary → Tailwind v4**。

— CSS フレームワーク & UI ライブラリ 2026、了。

参考 / References

- [Tailwind CSS 公式](https://tailwindcss.com/)

- [Tailwind CSS v4.0 リリースノート](https://tailwindcss.com/blog/tailwindcss-v4)

- [Tailwind Plus(旧 Tailwind UI)](https://tailwindcss.com/plus)

- [shadcn/ui 公式](https://ui.shadcn.com/)

- [Radix UI Primitives](https://www.radix-ui.com/primitives)

- [Radix Themes](https://www.radix-ui.com/themes)

- [Mantine 7 公式](https://mantine.dev/)

- [Chakra UI v3 公式](https://chakra-ui.com/)

- [HeadlessUI](https://headlessui.com/)

- [Ark UI 公式](https://ark-ui.com/)

- [Park UI 公式](https://park-ui.com/)

- [Open Props 公式](https://open-props.style/)

- [UnoCSS 公式](https://unocss.dev/)

- [Panda CSS 公式](https://panda-css.com/)

- [Vanilla Extract 公式](https://vanilla-extract.style/)

- [DaisyUI 公式](https://daisyui.com/)

- [Flowbite 公式](https://flowbite.com/)

- [HeroUI(旧 NextUI)](https://www.heroui.com/)

- [MUI 公式](https://mui.com/)

- [Ant Design 公式](https://ant.design/)

- [Vuetify 公式](https://vuetifyjs.com/)

- [Quasar 公式](https://quasar.dev/)

- [Element Plus](https://element-plus.org/)

- [PrimeReact / PrimeNG / PrimeVue](https://primereact.org/)

- [Skeleton UI(Svelte)](https://www.skeleton.dev/)

- [Bits UI(Svelte)](https://www.bits-ui.com/)

- [Solid UI](https://www.solid-ui.com/)

- [Pico CSS](https://picocss.com/)

- [Bulma](https://bulma.io/)

- [Catppuccin](https://catppuccin.com/)

- [Rose Pine](https://rosepinetheme.com/)

- [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme)

- [Modern CSS Reset(Andy Bell)](https://piccalil.li/blog/a-more-modern-css-reset/)

- [Lightning CSS](https://lightningcss.dev/)

- [Style Dictionary](https://amzn.github.io/style-dictionary/)

- [Tokens Studio](https://tokens.studio/)

- [Toss Frontend ライブラリ](https://github.com/toss/slash)

- [Yamada UI](https://yamada-ui.com/)

- [TDesign(Tencent)](https://tdesign.tencent.com/)

- [MDN — Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)

- [MDN — View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)

- [MDN — :has() セレクタ](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)

- [oklch.com — カラーピッカー](https://oklch.com/)