dev TailwindCSS

Tailwind CSS Arbitrary Values 完全ガイド - テーマにない値を自由に使う方法

Tailwind CSS arbitrary values（任意の値）を実践的に学ぶ完全ガイド。角括弧構文の使い方から、実務での使い分け、ブランドカラーやデザインカンプに対応する方法まで、実際のコード例で詳しく解説します。

読者がこの記事から得られる知識

この記事では、Tailwind CSS arbitrary values（任意の値）の基本概念を実践的に学びます。テーマで定義されていないカスタム値を使う方法を理解できます。

この記事で学べること：

  • Tailwind CSSにおけるarbitrary values（任意の値）の基本概念と角括弧構文
  • テーマ値と任意の値の違いと使い分けの判断基準
  • ブランドカラーやデザインカンプの正確な値を指定する方法
  • calc()などのCSS関数を組み合わせる方法
  • 実務で任意の値を使うべきケースと避けるべきケース

実際にコードを書いて、ブラウザで結果を確認しながら学習を進めていきます。「テーマにない値が必要な時、どうすればいいのか？」という疑問が解消され、Tailwind CSSでの柔軟なスタイリング方法が身につきます。

今回ハンズオンした内容

今回は、Tailwind CSS公式ドキュメントの「Using arbitrary values」セクション（https://tailwindcss.com/docs/styling-with-utility-classes#using-arbitrary-values）を参照しながら、arbitrary values（任意の値）を実践しました。CSS フレームワークであるTailwind CSSでは、テーマで定義されていない値が必要な場合、角括弧[]を使って任意の値を指定できます。

ファイル構造

tailwindcss/
├── src/
│   ├── index.html
│   ├── input.css
│   └── output.css
├── package.json
├── package-lock.json
└── README.md

ステップ1: 任意の値を使ったサンプルコードの追加

実行する操作:

src/index.html に、様々な任意の値を使ったサンプルコードを追加します。

  <!-- Using class composition サンプル: フィルター効果の組み合わせ -->
  <div class="mt-8 mx-auto max-w-sm">
    <!-- 既存のコード -->
  </div>
  <!-- ↓ ここから追加 -->
  <!-- Using arbitrary values サンプル -->
  <div class="mt-8 mx-auto max-w-sm">
    <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Arbitrary Values</h2>
    <!-- 1. 任意の色 (Facebookブルー) -->
    <div class="mb-4">
      <button class="bg-[#1877f2] text-white px-6 py-3 rounded-lg font-semibold hover:bg-[#166fe5]">
        Sign in with Facebook
      </button>
    </div>
    <!-- 2. 任意のサイズ -->
    <div class="mb-4">
      <div class="w-[137px] h-[89px] bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center text-white font-bold">
        137 × 89
      </div>
    </div>
    <!-- 3. 任意のグリッド -->
    <div class="mb-4">
      <div class="grid grid-cols-[100px_1fr_2fr] gap-4">
        <div class="bg-blue-500 text-white p-4 rounded text-center">100px</div>
        <div class="bg-green-500 text-white p-4 rounded text-center">1fr</div>
        <div class="bg-red-500 text-white p-4 rounded text-center">2fr</div>
      </div>
    </div>
    <!-- 4. calc()を使った任意の値 -->
    <div class="mb-4">
      <div class="bg-yellow-400 p-4 rounded-lg">
        <p class="font-semibold mb-2">calc()を使用</p>
        <div class="w-[calc(100%-2rem)] h-12 bg-yellow-600 rounded"></div>
      </div>
    </div>
    <!-- 5. CSS変数を設定 -->
    <div class="mb-4 [--card-padding:2rem] bg-indigo-500 text-white rounded-lg" style="padding: var(--card-padding);">
      <p class="font-semibold">CSS変数を使用</p>
      <p class="text-sm">padding: var(--card-padding) = 2rem</p>
    </div>
  </div>
  <!-- ↑ ここまで追加 -->
</body>
</html>

操作の意味:

5つの異なる任意の値の使用例を追加しています：

  • 任意の色：テーマにないブランドカラー（Facebookブルー）
  • 任意のサイズ：特殊なピクセル値（137×89）
  • 任意のグリッド：複雑なgrid-template-columns
  • calc()関数：動的な幅の計算
  • CSS変数：カスタムプロパティの設定

操作を実行する意図:

角括弧[]構文を使うことで、Tailwindのテーマにない値を自由に指定できることを実証します。これにより、デザインカンプの正確な値やブランドガイドラインの色を指定できます。

実行結果:

ブラウザで表示すると、以下のように5つの例が表示されます。

Arbitrary Valuesの実行例（Facebookブルーのボタン、グラデーションボックス、グリッドレイアウト、calc()、CSS変数）

実行結果の解説:

期待通り、すべての任意の値が正しく適用されています：

1. Facebookブルーのボタン - bg-[#1877f2]でテーマにないカスタムカラーが適用されています
2. 137×89のグラデーションボックス - w-[137px] h-[89px]で正確なサイズが指定できています
3. 3列グリッド - grid-cols-[100px_1fr_2fr]で固定幅と可変幅を組み合わせた複雑なレイアウトが実現できています
4. calc()の黄色いボックス - 内側のボックスが親の幅から2rem引いた幅になっており、動的な計算が機能しています
5. CSS変数のインディゴボックス - [--card-padding:2rem]でCSS変数を設定し、style属性で参照できています

これらすべてが、角括弧[]を使うだけで実現できており、カスタムCSSを書く必要がありません。

ステップ2: テーマ値と任意の値の違いを理解する

実行する操作:

同じ見た目を、テーマ値と任意の値の両方で実現してみます。

テーマ値の例：

<div class="bg-blue-500 w-64 p-4 text-xl">

任意の値の例：

<div class="bg-[#3b82f6] w-[256px] p-[16px] text-[20px]">

操作の意味:

テーマ値（blue-500、64、4、xl）と任意の値（[#3b82f6]、[256px]、[16px]、[20px]）の両方で同じスタイルを実現できることを確認します。

操作を実行する意図:

任意の値は便利ですが、テーマ値を使うべき場面と任意の値を使うべき場面を理解することが重要です。テーマ値を使うことで、デザインシステムの一貫性が保たれます。

実行結果の解説:

見た目は同じですが、以下の違いがあります：

テーマ値のメリット：

  • デザインシステムの一貫性が保たれる
  • メンテナンスしやすい（テーマを変更すれば全体に反映される）
  • 他の開発者が見ても意図が分かりやすい

任意の値のメリット：

  • テーマにない特殊な値を指定できる
  • デザインカンプの正確な値を再現できる
  • ブランドカラーなど、変更されない固定値を指定できる

使い分けの判断基準：
テーマにある値が使えるなら、テーマ値を優先すべきです。任意の値は、本当にテーマにない値が必要な時だけ使います。

ハンズオンの中で私が疑問に感じた点や失敗した点

よくある疑問

疑問1: テーマ値（bg-blue-500）と任意の値（[#1877f2]や[137px]）の違いは何ですか？

解決手段:

テーマ値（Theme values）：

<div class="bg-blue-500 w-64 p-4 text-xl">
  • blue-500 ← Tailwindのカラーパレットで定義済み
  • 64 ← Tailwindのサイズスケールで定義済み（16rem）
  • 4 ← Tailwindの間隔スケールで定義済み（1rem）
  • xl ← Tailwindのフォントサイズスケールで定義済み

任意の値（Arbitrary values）：

<div class="bg-[#1877f2] w-[137px] p-[13px] text-[19px]">
  • [#1877f2] ← テーマにないカスタムカラー
  • [137px] ← テーマにない特殊なサイズ
  • [13px] ← テーマにない間隔
  • [19px] ← テーマにないフォントサイズ

見分け方：
角括弧[]があるかどうかで判断できます。テーマ値には角括弧がなく、任意の値には角括弧があります。

疑問2: 実務において角括弧を使って指定するケースとは、どのようなケースがありますか？

解決手段:

実務で任意の値を使うべき主なケースは以下の通りです：

1. ブランドカラー・企業カラー

<button class="bg-[#1877f2]">Facebook</button>
<button class="bg-[#00acee]">Twitter</button>

理由：ブランドガイドラインで指定された正確な色を使う必要がある

2. デザイナーから指定された特殊な値

<div class="w-[374px] h-[667px]">  <!-- iPhone 8のサイズ -->
<div class="tracking-[0.02em]">     <!-- 文字間隔の微調整 -->

理由：デザインカンプと完全に一致させる必要がある

3. レガシーシステムとの統合

<div class="w-[960px]">  <!-- 古い固定幅レイアウト -->
<div class="max-w-[1140px]">  <!-- Bootstrap風の最大幅 -->

理由：既存システムと同じ値を使って一貫性を保つ

4. 複雑なCSS関数が必要な場合

<div class="h-[calc(100vh-64px)]">  <!-- ヘッダー分を引いた高さ -->
<div class="grid-cols-[200px_minmax(0,1fr)_300px]">

理由：テーマでは表現できない複雑なレイアウト

使うべきでないケース：

  • テーマで対応できる値がある場合
  • 同じ値を3回以上使う場合（テーマに追加すべき）

疑問3: 任意の値を使うと、TailwindのCSSファイルが大きくならないのですか？

解決手段:

心配ありません。Tailwind CSSはビルド時に実際に使用されているクラスだけをスキャンして、必要なCSSのみを生成します。

Tailwindの仕組み：
1. プロジェクト内のすべてのファイルをスキャン
2. クラス名のように見えるシンボルを検出
3. 検出されたクラスのCSSのみを生成

例えば、bg-[#1877f2]というクラスを使うと、Tailwindは以下のCSSを生成します：

.bg-\[\#1877f2\] {
  background-color: #1877f2;
}

使っていないクラスのCSSは生成されないため、ファイルサイズは最小限に保たれます。

これは、テーマ値（bg-blue-500）も任意の値（bg-[#1877f2]）も同じです。どちらも使った分だけCSSが生成されます。

よくある失敗

失敗1: 動的な値に任意の値を使おうとする

誤った例:

// Reactで動的な値を使おうとする
const userColor = "#ff6b6b";
<button className={bg-[${userColor}]}>  // これは動かない！

エラーメッセージ/結果:
ボタンの背景色が適用されません。Tailwindはビルド時にクラスをスキャンするため、実行時に生成される文字列は検出できません。

模範例:

// インラインスタイルを使う
const userColor = "#ff6b6b";
<button style={{ backgroundColor: userColor }}>  // これが正しい

ポイント:
動的な値（データベース、API、ユーザー入力など）には、必ずインラインスタイルを使います。任意の値はビルド時に決まる静的な値にのみ使えます。

失敗2: 任意の値の中にスペースを入れる

誤った例:

<div class="w-[calc(100% - 2rem)]">  // スペースあり

エラーメッセージ/結果:
クラスが正しく認識されず、スタイルが適用されません。Tailwindは空白をクラスの区切りと判断するため、w-[calc(100%と-と2rem)]という3つの別々のクラスとして扱われます。

模範例:

<div class="w-[calc(100%-2rem)]">  // スペースなし

ポイント:
任意の値の中では、スペースを削除するか、アンダースコア_で置き換えます。例：[calc(100%_-_2rem)]

失敗3: テーマにある値を任意の値で指定する

誤った例:

<div class="bg-[#3b82f6] text-[16px] p-[16px]">

エラーメッセージ/結果:
エラーは出ませんが、デザインシステムの一貫性が失われます。また、テーマを変更しても、この要素には反映されません。

模範例:

<div class="bg-blue-500 text-base p-4">

ポイント:
テーマにある値は、必ずテーマ値を使います。テーマ値を使うことで、デザインシステムの一貫性が保たれ、メンテナンスしやすくなります。

失敗4: 同じ任意の値を何度も使う

誤った例:

<div class="w-[374px]">
<div class="w-[374px]">
<div class="w-[374px]">

エラーメッセージ/結果:
エラーは出ませんが、同じ値を何度も書くことでコードが冗長になり、変更が困難になります。

模範例:
テーマに追加する：

// tailwind.config.js
theme: {
  extend: {
    width: {
      'mobile': '374px'
    }
  }
}

<div class="w-mobile">
<div class="w-mobile">
<div class="w-mobile">

ポイント:
同じ値を3回以上使う場合は、テーマに追加して管理します。これにより、一箇所を変更するだけで全体に反映されます。

失敗5: CSS変数の参照に誤った構文を使う

誤った例:

<!-- Tailwind v3以前の構文 -->
<div class="bg-[var(--my-color)]">

エラーメッセージ/結果:
Tailwind v4では、CSS変数を参照する構文が変更されました。この書き方ではスタイルが適用されません。

模範例:

<!-- Tailwind v4の正しい構文 -->
<div class="bg-(--my-color)">
<!-- またはインラインスタイルで -->
<div style="--my-color: #ff6b6b;" class="bg-(--my-color)">

ポイント:
Tailwind v4では、CSS変数を参照する際にbg-(--変数名)という構文を使います。ただし、実務では確実性を考えてインラインスタイルを使う方が安全です。

記載内容の翻訳

公式ドキュメント（https://tailwindcss.com/docs/styling-with-utility-classes#using-arbitrary-values）の内容を日本語で読み取れるようにします。

Using arbitrary values

Tailwindの多くのユーティリティは、bg-blue-500、text-xl、shadow-mdのようにテーマ変数によって駆動されています。これらは、基盤となるカラーパレット、タイプスケール、シャドウにマッピングされます。

テーマの外にある一回限りの値を使う必要がある場合は、任意の値を指定するための特別な角括弧構文を使います：

<button class="bg-[#316ff6] ...">
  Sign in with Facebook
</button>

これは、カラーパレット外の一回限りの色（上記のFacebookブルーなど）に役立ちますが、非常に特殊なカスタム値が必要な場合にも役立ちます。例えば、非常に特殊なグリッド：

<div class="grid grid-cols-[24rem_2.5rem_minmax(0,1fr)]">
  <!-- ... -->
</div>

テーマの値を使用している場合でも、calc()のようなCSS機能を使用する必要がある場合に便利です：

<div class="max-h-[calc(100dvh-(--spacing(6)))]">
  <!-- ... -->
</div>

完全に任意のCSS（任意のプロパティ名を含む）を生成するための構文さえあり、CSS変数を設定するのに役立ちます：

<div class="[--gutter-width:1rem] lg:[--gutter-width:2rem]">
  <!-- ... -->
</div>

詳細は任意の値の使用のドキュメントを参照してください。

How does this even work?

Tailwind CSSは、他のCSSフレームワークのような1つの大きな静的スタイルシートではありません。CSSをコンパイルする際に、実際に使用しているクラスに基づいて必要なCSSを生成します。

これは、プロジェクト内のすべてのファイルをスキャンして、クラス名のように見えるシンボルを探すことで実現しています。

すべての潜在的なクラスを見つけた後、Tailwindはそれぞれに対してCSSを生成し、実際に必要なスタイルだけを含む1つのスタイルシートにコンパイルします。

CSSはクラス名に基づいて生成されるため、Tailwindはbg-[#316ff6]のような任意の値を使用したクラスを認識し、値がテーマの一部でなくても必要なCSSを生成できます。

詳細はソースファイル内のクラスの検出を参照してください。

今回のまとめ

お疲れさまでした！今回は、Tailwind CSS arbitrary values（任意の値）について実践的に学習しました。

今回学習したこと：

  • Tailwind CSS arbitrary values（任意の値）により、角括弧[]構文を使ってテーマにない値を自由に指定できる
  • テーマ値はデザインシステムの一貫性を保つために優先すべきで、任意の値はブランドカラーやデザインカンプの正確な値など、本当に必要な時だけ使う
  • 動的な値（API、データベース、ユーザー入力）には任意の値は使えず、インラインスタイルを使う必要がある。任意の値はビルド時に決まる静的な値にのみ使える

次回は「Complex selectors」セクションで、複雑なセレクタの使い方を学習します。また別の記事でお会いしましょう！


-dev, TailwindCSS