Tailwind CSSでフォームを綺麗に作る方法｜入力欄・ラベル・バリデーション表示

フォームって、地味なわりに崩れやすいと思いませんか？ <input> をそのまま置くとブラウザのデフォルト枠が出てきて、デザインが一気に古く見える……。かといって細かくスタイルを当てるのも面倒。

Tailwind CSSなら、入力欄・ラベル・ボタンの見た目をユーティリティクラスの組み合わせでサッと整えられます。この記事では、フォームを綺麗に作るための基本（枠線・角丸・フォーカスリング・余白）から、@tailwindcss/forms プラグインの使いどころ、エラー表示まで、コピペできる形で解説します。Tailwindの全体像は Tailwind CSSの使い方【初心者向け】 に、導入は RailsにTailwind CSS v4を導入する方法 にまとめています。

まず完成形：シンプルな登録フォーム

最初にゴールを見せます。これくらいのフォームなら、Tailwindのクラスだけで作れます。

難しいことはしていません。「枠線・角丸・余白・フォーカス時の見た目」を整えているだけです。順番に分解していきましょう。

基本：入力欄（input）を整える4点セット

素の <input> に、まずはこの4つを当てます。これだけで見違えます。

<input
  type="text"
  class="w-full px-3 py-2 rounded-lg border border-slate-300
         focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none" />

• w-full px-3 py-2：横幅いっぱい＋内側の余白（パディング）で押しやすく
• rounded-lg：角を少し丸めて今っぽく
• border border-slate-300：薄いグレーの枠線
• focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none：フォーカス時に枠線の色を変え、外側にうっすらリング（ring）を出す

ポイントは focus:outline-none でブラウザ標準の青いアウトラインを消し、代わりに focus:ring で自前のリングを出すこと。これで「フォーカスが当たっている感」を残しつつ、デザインを統一できます。focus: の使い方そのものは 使い方記事 でも触れています。

ラベルと余白を整える

入力欄の上にラベルを置き、項目どうしの間隔を空けると、ぐっと読みやすくなります。ラベルは block で改行させ、入力欄との間に mb-1.5 の余白を入れます。

<div>
  <label class="block text-sm font-medium text-slate-700 mb-1.5">お名前</label>
  <input type="text"
    class="w-full px-3 py-2 rounded-lg border border-slate-300
           focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none" />
</div>

項目が複数並ぶときは、フォーム全体を <form class="space-y-4"> で囲むと、子要素の間に均等な縦の余白が入ります。1つずつ margin を付けるより楽でズレません。

<form class="space-y-4">
  <div>...お名前...</div>
  <div>...メールアドレス...</div>
  <div>...パスワード...</div>

  <button class="w-full py-2.5 rounded-lg bg-indigo-500 text-white font-semibold
                 hover:bg-indigo-600">
    登録する
  </button>
</form>

@tailwindcss/forms で土台をまとめて整える

「毎回 border rounded-lg px-3 py-2 を書くのが面倒」「select やチェックボックスの見た目もまとめて整えたい」——そんなときは公式プラグインの @tailwindcss/forms が便利です。フォーム要素にきれいなデフォルトスタイルを与えてくれるので、あとはユーティリティで微調整するだけで済みます。

Tailwind v4では、CSSファイルに @plugin で読み込みます（JS設定ファイルは不要になりました）。

/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/forms";

プラグインには2つの戦略（strategy）があります。挙動が変わるので、最初に決めておきましょう。

• base（デフォルト）：input や select などの要素そのものにグローバルなスタイルが当たる。クラスを足さなくても整う
• class：グローバルには当てず、form-input form-select などの専用クラスを付けたものだけ整える。既存スタイルと衝突させたくないときに

/* class 戦略にしたいとき */
@plugin "@tailwindcss/forms" {
  strategy: class;
}

新規プロジェクトなら base で十分。既存サイトに後から入れるなら、影響範囲を絞れる class が安全です。

入力欄の「状態」を見た目で伝える

フォームで地味に効くのが、状態に応じた見た目の変化です。通常・フォーカス中・エラーがひと目で区別できると、ユーザーは迷いません。

フォーカスは先ほどの focus: で対応できます。エラー（赤枠＋メッセージ）は、入力欄の状態を隣のメッセージに伝える peer を使うのがスマートです。

<input
  type="email"
  required
  placeholder="you@example.com"
  class="peer w-full px-3 py-2 rounded-lg border border-slate-300
         focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none" />

<p class="invisible peer-invalid:visible mt-1 text-sm text-red-600">
  メールアドレスの形式が正しくありません
</p>

入力欄に peer、エラーメッセージに peer-invalid:visible を付けるだけで、type="email" の形式チェックに引っかかったときだけメッセージが出ます。JavaScriptは不要です。この peer の仕組みやエラー表示の細かい制御（「入力し始めてから出す」など）は Tailwind CSSのpeerとは？groupとの違い・peer-checked・peer-invalid・効かない原因まで で詳しく解説しているので、フォームを作り込むならぜひ合わせて読んでください。

まとめ

Tailwindでフォームを綺麗に作るコツを振り返ります。

• 入力欄は 枠線・角丸・余白・フォーカスリングの4点セットが基本
• focus:outline-none で標準アウトラインを消し、focus:ring で自前のリングを出す
• 項目の間隔は space-y-4 でまとめて整える
• 土台をまとめたいなら @tailwindcss/forms（v4は @plugin で読み込み・base/class 戦略を選ぶ）
• エラー表示は peer-invalid: でJavaScriptなしに

まずは「枠線・角丸・余白・フォーカスリング」の4点だけ手元のフォームに当ててみてください。それだけで見た目が一段引き締まります。関連して、peerでの状態スタイル や、レイアウト全体の組み立て方は Tailwind CSSの使い方【初心者向け】 もどうぞ。

スポンサーリンク