「このTailwindのクラス名、なんとなくコピペしているけど、実際に何をやっているのかよくわかっていない…」
私もそうでした。特にフォームのUI部分は、クラスが多くて読むだけでお腹いっぱいになってしまいます。
そこで今回は、実際に使ったフォームUIのTailwindクラスを、ひとつずつ丁寧に読み解いてみました。「なんとなく動いているコード」を「ちゃんと理解して書けるコード」に変えるきっかけになれば嬉しいです。
テキスト入力（<input type="text">）のクラスを読む
まずはテキスト入力欄のクラスから見ていきましょう。
"flex-1 rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2"
| クラス | 意味 |
|---|---|
flex-1 | 親要素の残りの幅を全部占有する（横いっぱいに広がる） |
rounded-md | 角を中程度に丸める |
border | 1px の枠線をつける |
border-zinc-700 | 枠線の色をダークグレー（zinc-700）にする |
bg-zinc-800 | 背景色をさらに暗いグレー（zinc-800）にする |
px-3 | 左右の内側余白を 12px にする |
py-2 | 上下の内側余白を 8px にする |
flex-1は「フレックスコンテナの中で残りのスペースを全部使う」という指定です。隣にボタンがある場合、ボタンのサイズは固定で、入力欄だけが残りのスペースいっぱいに広がるイメージです。
次にテキストスタイルです。
"text-sm text-zinc-100 placeholder-zinc-500"
| クラス | 意味 |
|---|---|
text-sm | 文字サイズを小さめ（14px）にする |
text-zinc-100 | 文字色をほぼ白にする |
placeholder-zinc-500 | プレースホルダーの色をグレーにする |
ダークUIでは、入力テキストはほぼ白（zinc-100）にして、まだ何も入力していないときのガイドテキスト（プレースホルダー）は控えめなグレー（zinc-500）にするのがよく使われるパターンです。
最後にフォーカス時の見た目。
"focus:border-indigo-500 focus:outline-none"
| クラス | 意味 |
|---|---|
focus:border-indigo-500 | フォーカス時（クリック時）に枠線をインディゴ色にする |
focus:outline-none | フォーカス時のブラウザデフォルト枠を消す |
focus:outline-noneは、ブラウザが自動でつける「青い輪っか」を消すためのものです。ただし、アクセシビリティの観点から、outlineを消す場合は代わりにfocus:border-indigo-500のような視覚的フィードバックを必ずセットで用意しましょう。このコードはその模範例になっています。
ラベル（<label>）のクラスを読む
"text-xs text-zinc-500 whitespace-nowrap"
| クラス | 意味 |
|---|---|
text-xs | 文字サイズをさらに小さく（12px）にする |
text-zinc-500 | 文字色を中間グレーにする |
whitespace-nowrap | テキストが折り返さないようにする |
whitespace-nowrapは、「重み」「件数」などの短いラベルが途中で改行されてしまうのを防ぎます。横並びのレイアウトで特に効いてくるクラスです。
数値入力（<input type="number">）のクラスを読む
"w-16 rounded-md border border-zinc-700 bg-zinc-800 px-2 py-2"
| クラス | 意味 |
|---|---|
w-16 | 横幅を固定 64px にする（数字1〜2桁が入るサイズ） |
rounded-md | 角を丸める |
border / border-zinc-700 | ダークグレーの枠線 |
bg-zinc-800 | 暗いグレー背景 |
px-2 / py-2 | 内側余白を 8px |
テキスト入力との違いは、flex-1の代わりにw-16で幅を固定している点です。数字は1〜2桁しか入らないので、広げる必要がないわけですね。
"text-sm text-zinc-100 text-center"
text-centerで数字を中央揃えにしているのも、数値入力ならではの細かい配慮です。
⚠️ バグメモ：
focuss:outline-none（sが2つ）はタイポです。正しくはfocus:outline-noneです。Tailwindのクラスは存在しないものは単純に無視されるので、エラーは出ませんが効いていません。こういうミスは気づきにくいので要注意です。
ボタン（<button>）のクラスを読む
"rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white"
| クラス | 意味 |
|---|---|
rounded-md | 角を丸める |
bg-indigo-600 | 背景をインディゴ（青紫）にする |
px-4 | 左右の余白を 16px |
py-2 | 上下の余白を 8px |
text-sm | 文字サイズを小さめに |
font-medium | フォントの太さを中程度に（500） |
text-white | 文字色を白に |
"transition-colors hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
| クラス | 意味 |
|---|---|
transition-colors | 色の変化にアニメーションをつける |
hover:bg-indigo-500 | マウスを乗せたとき背景を少し明るいインディゴにする |
disabled:opacity-50 | ボタンが無効のとき半透明にする |
disabled:cursor-not-allowed | ボタンが無効のとき、マウスカーソルを「禁止」マークにする |
disabled:系のクラスは、UIの状態をユーザーに伝えるうえでとても重要です。「なんかクリックできない？」ではなく「あ、これは今使えないんだ」とひと目でわかるようにする工夫です。
色の体系を理解する（zinc / indigo）
Tailwindにはzincとindigoという2つのカラーパレットが登場します。
| 名前 | イメージ | 数字が大きいほど |
|---|---|---|
zinc-xxx | グレー系 | 暗くなる |
indigo-xxx | 青紫系 | 暗くなる |
グレーの流れをおさえておくと、コードを読むのがぐっと楽になります。
zinc-100（ほぼ白）→ zinc-500（中間グレー）→ zinc-700/800（ダーク）
- テキスト色：
zinc-100（明るく読みやすい） - プレースホルダー：
zinc-500（控えめ） - 枠線・背景：
zinc-700 / zinc-800（ダークUI向け）
このように、数字の意味を知っておくだけで「この色は何のため？」がすぐわかるようになります。
まとめ
今回はフォームUIを例に、Tailwind CSSのクラスをひとつずつ読み解いてみました。私なりに整理したポイントはこんな感じです。
flex-1とw-16の使い分け（伸びる vs 固定）focus:outline-noneは視覚的フィードバックとセットで使うdisabled:系クラスでUI状態をユーザーに伝える- zinc / indigoのカラー体系を数字で理解する
「なんとなくコピペしていたコード」が、少しでも「意図を持って書けるコード」に変わるきっかけになれば嬉しいです。