CSS内で変数を定義・使用できる機能です。--variable-name: valueで定義し、var(--variable-name)で参照します。テーマ切り替えや保守性の向上に大きく貢献し、デザインシステムの構築に不可欠です。
--variable-name: <value>; property: var(--variable-name, <fallback>);一般形: bg-(--brand-color) のように (--変数名) でCSS変数を参照（v4）
任意値: [--gap:1rem]（任意のカスタムプロパティを定義）
v3の bg-[var(--brand)] 記法はv4で (--brand) に短縮された。テーマ変数は @theme で定義する。
:root {
--primary-color: #3b82f6;
--spacing: 1rem;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}グローバル変数の定義と使用
.card {
--card-padding: 2rem;
padding: var(--card-padding);
}
.card--compact {
--card-padding: 1rem;
}コンポーネントレベルでの変数オーバーライド
color: var(--text-color, #333);フォールバック値付きの変数使用
JavaScriptから動的に変更可能。ダークモードの実装に必須。
変数名は大文字小文字を区別する。--で始める必要がある。
AIはSassの$変数とCSS変数を混同した説明をすることがあります。決定的な違いは、CSS変数は実行時に評価される（メディアクエリ内やJSからの変更で動的に変わる）点です。またvar(--x, フォールバック値)の第2引数、未定義時に「保証された無効値」となってプロパティ全体が initial/inherit になる挙動は、AIの生成コードでバグの温床になりがちです。
このSassの$変数をCSS変数に移行して。動的に変えたいもの（テーマ色）とビルド時定数（ブレークポイント）を区別して
CSS変数が未定義のときのフォールバック設計を、var()の第2引数で整備して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。