Tailwind CSS - フォーム要素のスタイル指定

📥 input（テキストなど）


      <input type="text" class="border border-gray-300 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="お名前">

⬇️ select のスタイル


      <select class="border border-gray-300 rounded px-3 py-2 w-full focus:ring-2 focus:ring-green-500">

        <option>選択してください</option>

        <option>選択肢 1</option>

        <option>選択肢 2</option>

      </select>

✅ checkbox のスタイル


      <label class="inline-flex items-center">

        <input type="checkbox" class="form-checkbox text-blue-600 mr-2">

        同意する

      </label>

🔘 radio ボタンのスタイル


      <label class="inline-flex items-center mr-4">

        <input type="radio" name="option" class="form-radio text-purple-600 mr-2">

        オプション1</label>

      <label class="inline-flex items-center">

        <input type="radio" name="option" class="form-radio text-purple-600 mr-2">

        オプション2</label>

📝 textarea のスタイル


      <textarea class="border border-gray-300 rounded px-3 py-2 w-full h-32 resize-none focus:ring-2 focus:ring-indigo-400" placeholder="ご意見をご記入ください"></textarea>

📦 よく使うクラス一覧

分類	クラス例	説明
外観	`border, rounded, shadow`	枠線・角丸・影
パディング	`px-3, py-2`	内側の余白
サイズ	`w-full, h-12`	幅・高さの調整
状態	`focus:ring, focus:outline-none`	フォーカス時の見た目
色	`text-blue-600, bg-gray-100`	テキストや背景色
フォント	`text-sm, text-lg`	文字サイズ
配置	`flex, inline-flex, items-center`	レイアウト調整

🧩 Tailwind Formsプラグイン（推奨）

より自然でモダンなフォームスタイルを使うには、@tailwindcss/forms プラグインの導入がおすすめです。

インストール

yarn add -D @tailwindcss/forms
または
npm install -D @tailwindcss/forms

tailwind.config.js の設定


      plugins: [

        require('@tailwindcss/forms'),

      ]

これにより、`form-checkbox`, `form-radio`, `input`, `select`, `textarea` などに自然なデフォルトスタイルが適用されます。