# CSS変数 (--property)

> CSS内で変数を定義・使用できる機能です。--variable-name: valueで定義し、var(--variable-name)で参照します。テーマ切り替えや保守性の向上に大きく貢献し、デザインシステムの構築に不可欠です。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/css-custom-properties/

## 構文

```css
--variable-name: <value>; property: var(--variable-name, <fallback>);
```

## Tailwindでは

- 一般形: `bg-(--brand-color) のように (--変数名) でCSS変数を参照（v4）`
- 任意値: `[--gap:1rem]（任意のカスタムプロパティを定義）`
- 補足: v3の bg-[var(--brand)] 記法はv4で (--brand) に短縮された。テーマ変数は @theme で定義する。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 49+ / Firefox 31+ / Safari 9.1+ / Edge 15+

## コード例

### 例1: グローバル変数の定義と使用

```css
:root {
  --primary-color: #3b82f6;
  --spacing: 1rem;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}
```

### 例2: コンポーネントレベルでの変数オーバーライド

```css
.card {
  --card-padding: 2rem;
  padding: var(--card-padding);
}

.card--compact {
  --card-padding: 1rem;
}
```

### 例3: フォールバック値付きの変数使用

```css
color: var(--text-color, #333);
```

## TIPS

JavaScriptから動的に変更可能。ダークモードの実装に必須。

## よくある間違い

変数名は大文字小文字を区別する。--で始める必要がある。

## AIがよく間違えるポイント

AIはSassの$変数とCSS変数を混同した説明をすることがあります。決定的な違いは、CSS変数は実行時に評価される（メディアクエリ内やJSからの変更で動的に変わる）点です。またvar(--x, フォールバック値)の第2引数、未定義時に「保証された無効値」となってプロパティ全体が initial/inherit になる挙動は、AIの生成コードでバグの温床になりがちです。

## AIへの依頼文例

- このSassの$変数をCSS変数に移行して。動的に変えたいもの（テーマ色）とビルド時定数（ブレークポイント）を区別して
- CSS変数が未定義のときのフォールバック設計を、var()の第2引数で整備して

## 関連プロパティ

- [color-mix](https://www.css-dictionary.com/property/color-mix.md)
- [at-property](https://www.css-dictionary.com/property/at-property.md)
- [light-dark](https://www.css-dictionary.com/property/light-dark.md)