Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

付録D 用語集

本書で登場した重要語をまとめます。詳しくは各章を参照してください。

  • ユーティリティクラス: 単一の役割だけを持つ小さなクラス(p-4・bg-white など)。これを組み合わせてデザインする(第3章)。
  • Utility First(ユーティリティファースト): ユーティリティクラスの組み合わせで UI を作る設計思想(第3章)。
  • バリアント: ユーティリティに条件を付ける接頭辞(hover:・md:・dark: など)。CSS のセレクタやメディアクエリを生成する(第6章)。
  • 任意の値(arbitrary value): 角かっこでスケール外の値を直接書く記法(p-[13px])。便利だが乱用は一貫性を崩す(第4章・第27章)。
  • テーマ変数 / デザイントークン: @theme で定義する、色・余白などの「デザイン上の決め事」。CSS 変数とユーティリティ生成を兼ねる(第5章)。
  • セマンティックトークン: 役割を表す色名などのトークン(--color-primary など)。ダークモードや配色変更に強い(第12章・第26章)。
  • @theme: テーマ変数を定義する v4 のディレクティブ(第5章)。
  • @apply: ユーティリティを自前の CSS クラスに展開するディレクティブ。構造の再利用にはコンポーネント抽出も検討する(第22章)。
  • @utility: 単機能のカスタムユーティリティを追加する v4 のディレクティブ(第22章・第26章)。
  • @plugin: JS ベースのプラグイン(typography/forms など)を CSS から読み込む互換ディレクティブ(第26章)。
  • @source: クラス走査の対象を明示的に追加/除外するディレクティブ(第4章・第26章)。
  • @custom-variant: 独自のバリアントを定義するディレクティブ。手動ダークモードにも使う(第6章・第18章)。
  • JIT(Just-In-Time): 使われているクラスだけをその場で生成する仕組み(第4章)。
  • Oxide: v4 の新エンジンのコードネーム。性能重視部分は Rust 製(第4章・第29章)。
  • Lightning CSS: v4 が内蔵する Rust 製の CSS 処理ツール(プレフィックス付与・構文変換・最適化など。@import の展開は Tailwind 側)(第4章・第29章)。
  • カスケードレイヤー(@layer): レイヤーの優先順位で詳細度の戦いを制御するモダン CSS 機能(第4章)。
  • コンテナクエリ(container query): 画面ではなく対象となる祖先コンテナの幅に反応するレイアウト(@container / @md:)(第14章・第17章)。
  • Preflight: Tailwind が当てる土台のリセット CSS(第4章)。
  • cn: clsx(条件分岐)と tailwind-merge(衝突解消)を組み合わせた定番ヘルパー(第23章)。
  • CVA(Class Variance Authority): 型安全にバリアントを管理するライブラリ(第23章)。
  • モバイルファースト: 無印が全画面に効き、md: などで広い画面を上書きする設計(第17章)。
  • FOUC: ダークモード初期表示などで起きる一瞬のちらつき(第18章)。