TECH · Tailwind CSS
コピペで使えるUIパターン
Tailwind CSSのユーティリティだけで組むヒーロー・料金表・フォーム・通知バナー。そのまま貼れるマークアップと、日本語で崩れないための行間の決め方、AIへの指示文まで掲載します。
サンプルとコード
見出し・説明・ボタン2つ・実績3項目という最小構成。余白は mt-6 と mt-8 と mt-10 の3段だけで組み、段階値から外れる数字を使っていません。
HTML
<section class="min-h-screen px-6 py-24">
<div class="mx-auto max-w-3xl text-center">
<span class="inline-flex items-center rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700">
2026 年版・無料アップデート
</span>
<h1 class="mt-6 text-4xl font-bold leading-[1.5] sm:text-5xl">
読みやすさから、<br />設計をはじめる。
</h1>
<p class="mx-auto mt-6 max-w-xl text-lg leading-[1.8] text-slate-600">
余白と行間の初期値を決めるだけで、画面の印象は驚くほど揃います。まずは 3 つの数字から始めてください。
</p>
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
<a href="#" class="rounded-xl bg-blue-600 px-6 py-3 font-semibold text-white hover:bg-blue-700">
無料ではじめる
</a>
<a href="#" class="rounded-xl border bg-white px-6 py-3 font-semibold hover:bg-slate-50">
資料を見る
</a>
</div>
<dl class="mx-auto mt-10 grid max-w-xl grid-cols-3 gap-8 border-t pt-8 text-center">
<div>
<dt class="text-sm text-slate-500">導入社数</dt>
<dd class="text-lg font-bold tabular-nums">1,280</dd>
</div>
<div>
<dt class="text-sm text-slate-500">継続率</dt>
<dd class="text-lg font-bold tabular-nums">94%</dd>
</div>
<div>
<dt class="text-sm text-slate-500">初期費用</dt>
<dd class="text-lg font-bold tabular-nums">¥0</dd>
</div>
</dl>
</div>
</section>AIへの指示文
Tailwind CSS でヒーローセクションを作ってください。
要件:
- 中央揃え。max-w-3xl を mx-auto で中央に置き、px-6 py-24 で余白を取る。
- 上にバッジ（rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-700）。
- 見出しは text-4xl sm:text-5xl font-bold。日本語なので leading-[1.5] を当てる。
- 説明文は text-lg text-slate-600、leading-[1.8]、max-w-xl で行長を抑える。
- ボタンは2つ。主ボタンは bg-blue-600 text-white、副ボタンは border bg-white。
どちらも rounded-xl px-6 py-3 font-semibold。
- 下に border-t pt-8 で区切り、実績を3項目 grid-cols-3 で並べる。
数字には tabular-nums を当てて桁を揃える。
- 任意値は leading 以外では使わない。余白は 4px の倍数の段階値だけを使う。
中央のカードだけ border-2 と shadow-lg で持ち上げ、バッジを -top-3 left-1/2 -translate-x-1/2 で枠線にまたがらせています。推しプランの作り方の定番です。
HTML
<section class="px-6 py-16">
<div class="mx-auto max-w-xl text-center">
<h2 class="text-3xl font-bold leading-[1.5]">料金プラン</h2>
<p class="mt-2 leading-[1.8] text-slate-600">
いつでも変更・解約できます。年払いにすると 2 か月分お得です。
</p>
</div>
<div class="mx-auto mt-10 grid max-w-5xl gap-6 md:grid-cols-3">
<div class="rounded-2xl border bg-white p-6 shadow-sm">
<h3 class="text-lg font-semibold">個人</h3>
<p class="mt-1 text-sm leading-[1.8] text-slate-600">ひとりで使う人向け</p>
<p class="mt-6 flex items-baseline gap-2">
<span class="text-3xl font-bold tabular-nums">¥0</span>
<span class="text-sm text-slate-500">/ 月</span>
</p>
<ul class="mt-6 text-sm leading-[1.8] text-slate-600">
<li class="mb-2">プロジェクト 3 件まで</li>
<li class="mb-2">書き出し 月 50 回</li>
<li class="mb-2">コミュニティ窓口</li>
</ul>
<a href="#" class="mt-6 block w-full rounded-xl border py-3 text-center font-semibold hover:bg-slate-50">
はじめる
</a>
</div>
<div class="relative rounded-2xl border-2 border-blue-600 bg-white p-6 shadow-lg">
<span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-blue-600 px-3 py-1 text-xs font-medium text-white">
いちばん選ばれています
</span>
<h3 class="text-lg font-semibold">チーム</h3>
<p class="mt-1 text-sm leading-[1.8] text-slate-600">5 人までの共同編集</p>
<p class="mt-6 flex items-baseline gap-2">
<span class="text-3xl font-bold tabular-nums">¥2,480</span>
<span class="text-sm text-slate-500">/ 月</span>
</p>
<ul class="mt-6 text-sm leading-[1.8] text-slate-600">
<li class="mb-2">プロジェクト 無制限</li>
<li class="mb-2">変更履歴 30 日保持</li>
<li class="mb-2">メール窓口（平日）</li>
</ul>
<a href="#" class="mt-6 block w-full rounded-xl bg-blue-600 py-3 text-center font-semibold text-white hover:bg-blue-700">
14 日間ためす
</a>
</div>
<div class="rounded-2xl border bg-white p-6 shadow-sm">
<h3 class="text-lg font-semibold">法人</h3>
<p class="mt-1 text-sm leading-[1.8] text-slate-600">人数の上限なし</p>
<p class="mt-6 flex items-baseline gap-2">
<span class="text-3xl font-bold tabular-nums">お見積り</span>
</p>
<ul class="mt-6 text-sm leading-[1.8] text-slate-600">
<li class="mb-2">シングルサインオン</li>
<li class="mb-2">監査ログ・請求書払い</li>
<li class="mb-2">専任の担当窓口</li>
</ul>
<a href="#" class="mt-6 block w-full rounded-xl border py-3 text-center font-semibold hover:bg-slate-50">
相談する
</a>
</div>
</div>
</section>AIへの指示文
Tailwind CSS で3カラムの料金表を作ってください。
要件:
- md:grid-cols-3 の grid、gap-6。max-w-5xl を mx-auto。
- カードは rounded-2xl border bg-white p-6 shadow-sm。
- 中央の推しプランだけ border-2 border-blue-600 と shadow-lg にして持ち上げる。
- 推しプランには「いちばん選ばれています」バッジを付ける。
position は absolute -top-3 left-1/2 -translate-x-1/2 で、枠線にまたがらせる。
- 価格は flex items-baseline gap-2 で「¥2,480」と「/ 月」を並べ、
金額に text-3xl font-bold tabular-nums を当てる。
- 各カード末尾のボタンは block w-full rounded-xl py-3 text-center font-semibold。
- 日本語の本文には leading-[1.8] を当てる。
ラベルと入力を grid gap-1 で組み、フォーカス時は border-blue-600 と ring-4 の2段で示します。チェックボックスは mt-1.5 で1行目の文字の高さに合わせています。
HTML
<section class="px-6 py-16">
<form class="mx-auto max-w-lg rounded-2xl border bg-white p-6 shadow-sm">
<h2 class="text-2xl font-bold leading-[1.5]">お問い合わせ</h2>
<p class="mt-2 text-sm leading-[1.8] text-slate-600">
2 営業日以内に、ご記入のメールアドレス宛にご返信します。
</p>
<div class="mt-6 grid gap-1">
<label for="name" class="text-sm font-medium">お名前</label>
<input id="name" name="name" type="text" required autocomplete="name" placeholder="山田 太郎" class="w-full rounded-lg border px-3.5 py-2.5 placeholder:text-slate-400 focus:border-blue-600 focus:outline-none focus:ring-4" />
</div>
<div class="mt-6 grid gap-1">
<label for="email" class="text-sm font-medium">メールアドレス</label>
<input id="email" name="email" type="email" required autocomplete="email" placeholder="you@example.com" class="w-full rounded-lg border px-3.5 py-2.5 placeholder:text-slate-400 focus:border-blue-600 focus:outline-none focus:ring-4" />
<p class="text-xs leading-[1.8] text-slate-500">お返事のためだけに使います。</p>
</div>
<div class="mt-6 grid gap-1">
<label for="body" class="text-sm font-medium">ご用件</label>
<textarea id="body" name="body" rows="5" required placeholder="できるだけ具体的にご記入ください。" class="w-full resize-y rounded-lg border px-3.5 py-2.5 leading-[1.8] placeholder:text-slate-400 focus:border-blue-600 focus:outline-none focus:ring-4"></textarea>
</div>
<div class="mt-6 flex items-start gap-4">
<input id="agree" name="agree" type="checkbox" required class="mt-1.5 cursor-pointer accent-blue-600" />
<label for="agree" class="cursor-pointer text-sm leading-[1.8] text-slate-600">
個人情報の取り扱いに同意します <span class="text-red-600">必須</span>
</label>
</div>
<button type="submit" class="mt-6 w-full rounded-lg bg-blue-600 py-3 font-semibold text-white hover:bg-blue-700 focus:outline-none focus:ring-4">
送信する
</button>
</form>
</section>AIへの指示文
Tailwind CSS でお問い合わせフォームを作ってください。
要件:
- 全体は max-w-lg rounded-2xl border bg-white p-6 shadow-sm。
- 各項目は grid gap-1 で「ラベル → 入力 → 補足」の縦並び。
ラベルは text-sm font-medium、補足は text-xs text-slate-500。
- 入力欄は w-full rounded-lg border px-3.5 py-2.5。
placeholder:text-slate-400 を当て、
focus:border-blue-600 focus:outline-none focus:ring-4 でフォーカスを2段で示す。
- textarea には resize-y と leading-[1.8] を当てる。
- 同意チェックは flex items-start gap-4。チェックボックスに mt-1.5 を当てて
ラベル1行目の文字の高さに合わせる。label と input は for と id で結ぶ。
- 送信ボタンは w-full rounded-lg bg-blue-600 py-3 font-semibold text-white。
- すべての入力に autocomplete と type を正しく指定する。
情報・成功・注意・エラーの4種。色は bg-{色}-50 と border-{色}-200 と text-{色}-800 の3点セットで揃え、role は status と alert を使い分けています。
HTML
<section class="px-6 py-16">
<div class="mx-auto grid max-w-2xl gap-4">
<div role="status" class="flex items-start gap-3 rounded-xl border border-blue-200 bg-blue-50 p-4 text-blue-800">
<span class="shrink-0" aria-hidden="true">ⓘ</span>
<div class="flex-1">
<p class="font-semibold">メンテナンスのお知らせ</p>
<p class="mt-1 text-sm leading-[1.8]">9 月 5 日 2:00 から 4:00 まで、書き出し機能を停止します。</p>
</div>
<button type="button" class="shrink-0 opacity-70 hover:opacity-100" aria-label="閉じる">×</button>
</div>
<div role="status" class="flex items-start gap-3 rounded-xl border border-green-200 bg-green-50 p-4 text-green-800">
<span class="shrink-0" aria-hidden="true">✓</span>
<div class="flex-1">
<p class="font-semibold">保存しました</p>
<p class="mt-1 text-sm leading-[1.8]">変更内容は共有リンクにも反映されています。</p>
</div>
</div>
<div role="alert" class="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4 text-amber-800">
<span class="shrink-0" aria-hidden="true">!</span>
<div class="flex-1">
<p class="font-semibold">保存容量が残りわずかです</p>
<p class="mt-1 text-sm leading-[1.8]">残り 8% です。古い書き出しを整理するか、プランを見直してください。</p>
</div>
</div>
<div role="alert" class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 text-red-800">
<span class="shrink-0" aria-hidden="true">×</span>
<div class="flex-1">
<p class="font-semibold">アップロードに失敗しました</p>
<p class="mt-1 text-sm leading-[1.8]">ファイル形式が対応外です。PNG・JPEG・WebP のいずれかをお使いください。</p>
</div>
</div>
</div>
</section>AIへの指示文
Tailwind CSS で通知バナーを4種類（情報・成功・注意・エラー）作ってください。
要件:
- 配色は3点セットで揃える。情報は blue、成功は green、注意は amber、エラーは red。
それぞれ bg-{色}-50、border-{色}-200、text-{色}-800 を使う。
- 構造は flex items-start gap-3 rounded-xl border p-4。
左にアイコン（shrink-0）、中央に本文（flex-1）、右に閉じるボタン。
- 見出しは font-semibold、本文は mt-1 text-sm leading-[1.8]。
- 情報と成功は role="status"、注意とエラーは role="alert" を付ける。
alert は即座に読み上げられるので、緊急でないものに付けない。
- アイコンは装飾なので aria-hidden="true"、閉じるボタンには aria-label="閉じる"。
この技術について
Tailwind CSSの本質は「クラス名を考えなくていい」ことではありません。デザインの決定を、あらかじめ決められた段階値の中から選ばせることです。余白は4pxの倍数、文字サイズは決まった段、色は決まった階調。この制約があるから、複数人で書いても見た目が揃い、AIに書かせても破綻しにくくなります。
段階値から外れた瞬間に利点が消える
逆に言えば、任意値の記法で好きな数字を書き始めた時点で、Tailwindを使う理由の大半は失われます。p-[13px] と p-[17px] が混ざったコードは、素のCSSで好きな数字を書いているのと変わりません。むしろクラス名が長い分だけ読みにくい。
この記事の4つのサンプルでは、余白を mt-1 mt-2 mt-6 mt-8 mt-10 の5段だけで組んでいます。それで足りないと感じる場面はほとんどありません。足りないと感じたときは、たいてい余白が問題なのではなく、要素の並び順や階層が整理できていないだけです。
日本語で必ずつまずくのが行間
ただし、日本語で使うときに一箇所だけ、素直に従うと失敗する場所があります。行間です。
Tailwindの既定では text-base の行間は 1.5、text-sm は約 1.43 です。これは英文を基準にした値で、日本語の本文に当てると明確に詰まって見えます。日本語の可読性が保てるのは概ね 1.7 から 1.85 の範囲で、leading-relaxed（1.625）でもまだ足りません。
恒久的な解決は、テーマに独自の段を足すことです。Tailwind v4 ならCSS側で @theme { --leading-ja: 1.8 } と書けば leading-ja が使えるようになります。この記事のサンプルでは、コピーしてすぐ動くことを優先して leading-[1.8] を直接当てています。任意値を避けるという原則の、意図的な例外です。
AIに書かせるときに効く指示
Tailwindは、AIコーディング支援に書かせる相性が特に良い部類です。出力がクラス名の羅列なので、生成結果を読んで判断しやすく、修正も一箇所で済みます。ただし放っておくと任意値を多用してくるので、指示に一行足しておくと結果が安定します。
「余白と文字サイズは既定の段階値だけを使い、角括弧の任意値は行間以外で使わないでください」。この一文があるかないかで、返ってくるコードの質はかなり変わります。各サンプルに添えたプロンプトにも、同じ趣旨を入れてあります。
最後に、消えるクラスの話
実務で最も多い事故は、クラス名を文字列として組み立ててしまうことです。text-${color}-600 のような書き方は、開発中は動くのに本番ビルドで消えます。Tailwindがソースコードを文字列として走査してクラスを収集する仕組みだからです。条件分岐では、常に完全なクラス名を丸ごと書いてください。
使いどころとつまずきどころ
向いている場面
- 複数人で触るプロダクトのUI
- AIコーディング支援に書かせる前提のコード
- デザインシステムを別途用意しない小～中規模サイト
- プロトタイプから本番へそのまま持っていきたいとき
つまずきやすい点
- 任意値（角括弧記法）を多用すると段階値の利点が消える
- クラスが長くなる箇所は部品化して切り出す
- 動的にクラス名を文字列結合すると本番ビルドで消える
- 日本語の行間は既定値のままだと詰まりやすい
よくある質問
Tailwindのクラスが長くなりすぎませんか。
長くなったら部品として切り出す合図です。同じクラス列を3回以上書いているなら、コンポーネントに分けるか、@apply でまとめてください。ただし @apply を多用するとTailwindを使う意味が薄れるので、まず部品化を検討するほうが健全です。
leading-[1.8] のような任意値は避けるべきでは。
原則そのとおりですが、日本語の行間は例外です。Tailwindの既定 leading は英文基準で、text-base だと 1.5 になります。日本語では詰まって読みにくいため、1.7〜1.85 が必要です。恒久的には @theme で独自の段を足すのが正解で、任意値はその前段の実用的な妥協です。
クラス名を動的に組み立てても大丈夫ですか。
危険です。Tailwindはソースを文字列として走査してクラスを拾うので、`text-${color}-600` のように分割して書くと本番ビルドで消えます。条件分岐で完全なクラス名を丸ごと持つ形にしてください。
このページのプレビューは本物のTailwindですか。
プレビュー自体は、外部CDNを読まずに単独で動くよう、使っているユーティリティだけをTailwind既定と同じ値で書き出しています。掲載しているマークアップは本物のTailwindのクラス名なので、Tailwindが入っているプロジェクトへ貼れば同じ見た目になります。