【Rails × Tailwind CSS】予約サイト開発で実感した、Tailwindがすごい話

🏷 はじめに

こんにちは。miyoshiです。現在Railsでサロン向けの予約サイト「sorairo note」を開発モニターしています。

ISSUE7は見た目、UIの開発でした。

本記事では「Tailwind パワー」実感したので、実例ベースで紹介していきます。

✅ なぜTailwind CSSを使ったのか？

Railsには従来からBootstrapとの親和性が高い印象があります。
それでもTailwindを選んだ理由は、、、、、

最近のモダンなUIにしたかった！！

特に、「RailsのERBとTailwindの組み合わせ」はHTMLを編集する即UI改善。

🛠 実際に作った画面（ユーザーmypage）

Tailwindを活用して、以下のような画面を実装しました

div class="max-w-md mx-auto p-4">
  <h2 class="text-2xl font-bold mb-6 text-center border-b pb-2">マイページ</h2>

  <section class="mb-8">
    <h3 class="text-lg font-semibold mb-4 text-gray-700 border-l-4 border-blue-400 pl-2">予約</h3>
    <div class="flex flex-col sm:flex-row gap-4">
      <div class="flex-1 bg-white rounded-xl shadow p-4 flex flex-col items-center hover:shadow-lg transition">
        <%= link_to new_users_reservation_path, class: "w-full flex flex-col items-center", data: { turbo: false } do %>
          <span class="text-3xl mb-2">📅</span>
          <span class="font-medium text-blue-600">新しい予約をする</span>
        <% end %>
      </div>
      <div class="flex-1 bg-white rounded-xl shadow p-4 flex flex-col items-center hover:shadow-lg transition">
        <%= link_to users_reservations_path, class: "w-full flex flex-col items-center" do %>
          <span class="text-3xl mb-2">📖</span>
          <span class="font-medium text-blue-600">予約一覧を見る</span>
        <% end %>
      </div>
    </div>
  </section>
</div>

🚫 Tailwindの注意点

Tailwindにはメリットばかりではありません。個人的に感じたデメリットも挙げておきます。

• HTMLタグがTailwindのクラスで“ごちゃごちゃ”に見えがち（可読性は注意）

• 重複コードが多くなる（renderなどで切り出し推奨）

🔚 まとめ：TailwindとRails

TailwindはRailsのView開発において、非常に強力な味方になりました。めちゃくちゃ見た目がいい！！

最後に

✨ プロジェクト進行中！

今、進行中です。
READMEを更新して、実際の各ページが見られるようにしています。ご興味がある方は、ご覧ください。

今後も機能追加・改善を予定しており、随時更新していきます！
🔗 GitHubリポジトリ：sorairo note（https://github.com/takumarider）