Tailwind CSS
CSS

TailwindCSSを使ってみた

最近のフロントエンド開発では、

#1. TailwindCSSとは？

TailwindCSSは ユーティリティファーストのCSSフレームワーク です。

特徴

  • 事前に用意されたクラスをHTMLに直接書くことでスタイルを適用できる
  • 独自CSSをほとんど書かなくてもデザインが整う
  • レスポンシブやダークモードなども簡単に設定可能

例えば、青色のボタンを作る場合：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  クリック
</button>
  • bg-blue-500 → 背景色
  • hover:bg-blue-700 → ホバー時の色
  • py-2 px-4 → パディング
  • rounded → 角丸

#2. Railsプロジェクトへの導入

Rails 7では Importmap、Webpack、jsbundling-rails のいずれでもTailwindCSSを導入可能です。

インストール例（Rails 7 + jsbundling-rails）

  1. TailwindCSSのインストール
rails tailwindcss:install
  • このコマンドで必要な設定ファイル（tailwind.config.js、application.tailwind.cssなど）が自動生成される
  1. CSSファイルの編集
/* app/assets/stylesheets/application.tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. ビューで使用
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div>
    <div class="text-xl font-medium text-black">TailwindCSS</div>
    <p class="text-gray-500">Railsで使ってみた</p>
  </div>
</div>

#3. TailwindCSSを使ってみた感想

3-1. 良かった点

  • 開発速度が速い

    → CSSを書く手間が減り、すぐにデザインできる

  • レスポンシブ対応が簡単

    → sm:, md: などの接頭辞で簡単に画面幅ごとのスタイルを適用

  • コンポーネント化との相性が良い

    → Railsの部分テンプレートやViewComponentと組み合わせやすい

3-2. 気をつける点

  • HTMLがクラスでゴチャゴチャになる

    → 長いクラス列になりやすいので整理が必要

  • デザインルールの統一

    → プロジェクト全体で色やフォントサイズのルールを統一しておかないとバラバラになりやすい

  • 初めは慣れが必要

    → flex や grid などのユーティリティクラスの組み合わせに慣れる必要あり

#4. 実際に作ったUI例

4-1. レスポンシブカード

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="image.jpg" alt="Sample">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Tailwind</div>
      <p class="mt-2 text-gray-500">Railsと組み合わせて高速開発できるCSSフレームワーク</p>
    </div>
  </div>
</div>

4-2. ボタンのホバー効果

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
  ボタン
</button>

#5. まとめ

TailwindCSSは Rails開発でのUI作りを高速化 する強力なツールです。

  • クラスベースで直感的にデザインできる
  • レスポンシブやダークモードも簡単に対応
  • 小規模〜大規模プロジェクトまで幅広く活用可能

💡 使うときのコツ

  • クラスの整理に @apply やコンポーネント化を活用
  • 色・フォント・サイズのルールはTailwindのカスタム設定で統一

TailwindCSSをRailsで使うと CSSの作業が劇的に減る ので、特に小規模チームやプロトタイプ開発におすすめです。

タグ一覧