dev TailwindCSS

Tailwind CSS Arbitrary Values（任意の値）の使い方 - テーマにない値を使う書き方

Tailwind CSS arbitrary values（任意の値）の書き方を、Tailwind CSS arbitrary values の実例と一緒に紹介します。w-[calc(100%-2rem)] のような角括弧構文の使い方から、ブランドカラーやデザインカンプに合わせた実装例まで解説します。

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

この記事では、Tailwind CSS arbitrary values（任意の値）の基本概念を、実際にコードを書きながら学びます。テーマで定義されていないカスタム値を使う方法が理解できます。Tailwind CSS の基礎から学び直したい場合は、TailwindCSS とは？特徴とメリットを初心者向けに解説【体験談あり】 を参考にしてください。

この記事で学べること：

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

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

今回ハンズオンした内容

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

背景色やテキスト色のテーマ値の使い方については、Tailwind CSS 背景色・テキスト色 bg text color の使い方まとめ にまとめています。Flexbox の中央揃えなど、テーマ値だけで実装できるケースは Tailwind CSS flex items-center justify-center の使い方 を参照してください。

ファイル構造

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

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

実行する操作:

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

<!-- 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>

操作の意味:

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 のカラーパレットで定義済み（背景色やテキスト色の詳しい使い方は Tailwind CSS 背景色・テキスト色 bg text color の使い方まとめ を参照）
  • 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-(--変数名) という構文を使います。ただし、実務では確実性を考えてインラインスタイルを使う方が安全です。

記載内容の翻訳

公式ドキュメント（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」セクションで、複雑なセレクタの使い方を学習します。また別の記事でお会いしましょう。

体系的に学びたい場合は、TailwindCSS 学習方法 で私のおすすめ学習ステップを紹介しています。

-dev, TailwindCSS