こんにちは、フロントエンドエンジニアのあおきです。
実務で役立つ Tailwind CSSのテクニック をシリーズ形式で紹介しています。
第3回の今回は、「デフォルト値に縛られない、自由自在な数値指定」 についてです。
任意値（Arbitrary values）の活用
「この余白、13pxにしたいけどTailwindのクラスにない」
「デザインカンプの指定が、Tailwindのデフォルト値（4の倍数など）にどうしても収まらない」
実務では、標準のユーティリティクラスだけでは対応できない「微調整」が必ず発生します。そんな時に、tailwind.config.js を汚さず、その場でスタイルを完結させるのが arbitrary value（任意値） です。
ブラケット [ ] でCSSの「自由度」を取り戻す
結論から言うと、[ ]（ブラケット）の中に値を書くだけで、どんなCSSプロパティの値もその場で生成できます。
ビルドを回し直したり、わざわざ別ファイルにカスタムCSSを書く必要はありません。TailwindのJITエンジンが、実行時に必要なクラスを動的に生成してくれます。
実務で使える！arbitrary value の4つのパターン
① 任意の数値を直接指定（サイズ・位置）
デザインカンプを確認していると、Tailwindの標準クラス（4px刻みなど）ではどうしても対応できない数値が出てきます。
フォントサイズの微調整
Tailwindには text-xs(12px)、text-sm(14px)、text-base(16px) などが用意されていますが、「その間の15pxがほしい！」や「もっと小さい10pxにしたい」という時があります。
15pxにしたい場合: text-[15px]
10pxにしたい場合: text-[10px]
デザインカンプどおりの指定をそのまま反映できます。
ネガティブマージンの指定
要素を重ねたい時に使うマイナスの余白（ネガティブマージン）も、ブラケットの前に -（マイナス記号） をつけるだけで指定可能です。
コード：-mt-[50px]（上に50px食い込ませる）
解説：mt-[50px] の先頭にハイフンをつけるだけなので、直感的に記述できます。もちろん左右 (-ml-, -mr-) や下 (-mb-) も同様です。
その他
w-[100px]
h-[calc(100vh-80px)]
top-[120px]
left-[12%]
z-[1]デザインカンプの数値をそのまま再現したいときに便利です。
② 透明度を指定する
色は色一覧表にあるように、色の名前と明度の数値を組み合わせて指定しますが、さらに透明度を加えたい場合は、最後に /（スラッシュ） を加え、透明度の数値を追記します。
コード：<div class="bg-black/[0.12]"></div>
解説：標準の bg-black/10（10%）などでは表現できない、絶妙な透け感（例：12%など）を作りたいなど、微妙なニュアンス調整でよく使います。
③ CSSカスタムプロパティ（変数）
CSS変数（CSSカスタムプロパティ）もそのまま利用できます。
例： text-[var(--color-primary)]
通常CSS： color: var(--color-primary);
テーマカラーやレイアウト制御と相性がいいです。
④ Tailwindにないスタイルの指定
Tailwindに定義されていないプロパティや値も自由に書けます。
レイアウト
grid-cols-[200px_1fr]
grid-rows-[auto_1fr_auto]
aspect-[4/3]ポイント
レイアウトは「デザイン指定そのまま再現」が求められる場面が多い
→ Tailwindのプリセットでは足りないことが多い
transform / 位置調整
rotate-[17deg]
scale-[1.03]ポイント
1px〜数pxの微調整は実務で頻出
→ デザインの“ズレ”を合わせるのに使う
見た目（装飾）
shadow-[0_4px_20px_rgba(0,0,0,0.08)]
rounded-[6px]
bg-[linear-gradient(90deg,#000,#fff)]ポイント
Tailwindのshadowやroundedは段階的
→ 「ちょうどいい値」が無いときに使う
filter / エフェクト
filter-[blur(2px)]
backdrop-blur-[2px]ポイント
エフェクト系はデザインごとの差が大きい
→ arbitrary value前提で使うケースが多い
タイポグラフィ
leading-[1.7]
text-[clamp(18px,_calc(0.74vw+15.33px),_26px)]ポイント
フォントサイズはデザインツール依存
→ プリセットとズレやすいので調整用途で使う
その他
pointer-events-[none]
overflow-x-[auto]ポイント
細かい制御系はプリセット外が多い
→ 必要なときだけピンポイントで使う
技術的な注意点：スペースは _（アンダースコア）で
ブラケット内では半角スペースが使えません。複数の値を指定したい場合は、スペースの代わりに_（アンダースコア）を使用します。
NG： grid-cols-[200px 1fr]
OK： grid-cols-[200px_1fr]
configいらず！Tailwind CSS 任意値（[ ]）で広がるデザイン表現
『これ、Tailwindじゃ無理かな？』と思うような複雑な指定も、任意値を使えばHTMLだけで完結します。透明度の微調整から、calcを使った計算、CSS変数の活用まで、実際の挙動をコードと一緒に確認してみましょう！
See the Pen Tailwind CSS 実務テクニック集｜arbitrary value 活用デモ by あおき (@himlinfq-the-encoder) on CodePen.
補足
arbitrary valueは非常に便利ですが、使いすぎると設計が崩れます。
- 基本はTailwindのスケールを使う
- 足りない部分だけ任意値を使う
このバランスが重要です。
