RailsアプリにTailwind CSS v4を導入する手順を、最短でまとめます。「RailsにTailwindを入れたいけれど、v4になって情報が錯綜していて、どれが正解か分からない」という方向けの記事です。
この記事では、すでに動いているRailsアプリに、あとからTailwind CSSを導入する流れを解説します。サンプルとして、記事を表示するブログアプリに Devise でログイン機能を付けた構成を使いますが、手順自体は新規・既存どちらのRailsアプリでも同じです。
目次
動作環境
| 項目 | バージョン / 前提 |
|---|---|
| Ruby | 3.2 以上 |
| Rails | 7.x / 8.x |
| tailwindcss-rails | 4.x（~> 4.0） |
| Tailwind CSS | v4 |
| Node.js | 不要（スタンドアロンCLIで動作） |
※本記事は Tailwind CSS v4 前提です。3系から設定方法が大きく変わっているので、v3の記事と混在させないよう注意してください。
TL;DR
まず結論。既存のRailsアプリなら、次の3コマンドで導入できます。
# 1. gemを追加
bundle add tailwindcss-rails
# 2. インストール（設定ファイルを生成）
rails tailwindcss:install
# 3. 開発サーバーを起動（CSS監視つき）
bin/dev新規作成なら rails new アプリ名 --css tailwind でも導入済みの状態で始められます。プラグインやフォームの装飾まで行う場合は、以下の詳細手順を参照してください。
導入手順（詳細）
1. Gemを追加してインストール
bundle add tailwindcss-rails
rails tailwindcss:installtailwindcss:install はTailwind CSS CLIのラッパーで、app/assets/tailwind/application.css や Procfile.dev などRails用の設定ファイルを生成します。
2. bin/dev で起動（CSSを監視）
bin/devbin/dev は Procfile.dev を参照し、RailsサーバーとTailwindのwatchを並行起動します。起動直後はCSSがリセットされた状態になります。
3. プラグインを追加（任意）
typography や forms プラグインを使うときは、app/assets/tailwind/application.css に追記します。
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";tailwindcss-rails は Node.js 不要のスタンドアロンCLIで動きます。@tailwindcss/typography と @tailwindcss/forms は標準でバンドル済みなので、npm install や yarn add は不要、@plugin で読み込むだけで使えます。（Nodeベースの古い記事では npm install を案内していることがありますが、本構成では不要です）
4. prose でブログ本文を整える
Tailwindは初期状態で全スタイルをリセットするため、記事本文には prose クラスが便利です。
<article class="prose mx-auto">
...省略
</article>prose がh1やpタグを自動で整え、mx-auto で中央寄せになります。注意：prose は <body> ではなく <article> など本文の範囲に限定して付けること。body全体に付けるとヘッダーやフッターまでスタイルが効き、レイアウトが崩れます。
5. Deviseフォームをスタイリング
まずDeviseのビューを生成し、ラベル・入力欄・ボタンにクラスを付けていきます。
rails generate devise:views<div class="mb-4">
<%= f.label :email, class: "block mb-1 font-medium" %>
<%= f.email_field :email, class: "w-full rounded border border-gray-300 p-2" %>
</div>
<div class="mb-4">
<%= f.label :password, class: "block mb-1 font-medium" %>
<%= f.password_field :password, class: "w-full rounded border border-gray-300 p-2" %>
</div>
<%= f.submit "Log in", class: "bg-gray-100 px-4 py-2 rounded hover:bg-gray-200" %>入力欄は w-full rounded border p-2、ボタンは hover:bg-gray-200 でホバー時の色変更まで指定しています。
よくある質問・トラブルシュート
bin/dev を実行してもCSSが反映されない
Tailwindの変更監視は bin/dev（Procfile.dev）で起動している必要があります。rails server だけで立ち上げているとCSSが再生成されません。プロセスを止め、bin/dev で起動し直してください。
本番環境でTailwindのCSSが当たらない
本番ではビルド済みCSSが必要です。tailwindcss-rails は rails assets:precompile 時に tailwindcss:build を自動実行するので、デプロイ時に precompile が走っているかを確認しましょう。ローカル確認は rails tailwindcss:build で行えます。
Tailwind v3 と v4 で何が違う？
v4では tailwind.config.js が原則不要になり、設定は application.css に集約されました（CSSファースト設定）。プラグインも @plugin で読み込みます。
Tailwind CSSとBootstrapは何が違う？
Bootstrapが完成済みコンポーネントを提供するのに対し、Tailwindは p-4 や flex などのユーティリティクラスを組み合わせて自分でデザインします。自由度が高く、未使用CSSが残りにくいのが特徴です。
Rails 8 でも使える？
使えます。tailwindcss-rails はRails 8に対応しており、rails new アプリ名 --css tailwind での指定も可能です。手順はRails 7・8で同じです。
RailsにTailwind CSSを使うメリット
「そもそもTailwindって必要？」という方向けに、メリットを補足しておきます。
- CSSを書かなくていい：クラスをHTMLに書くだけでスタイリングが完結し、命名やファイル管理から解放される
- 使い回しやすい：パーシャル＋クラスの組み合わせで、見た目を部品として再利用できる
- Railsとの相性が良い：gemで導入でき、
bin/devのプロセス管理にも自然に乗る
まとめ
RailsへのTailwind CSS v4導入は、tailwindcss-rails を使えば3コマンドで完了します。あとは prose やユーティリティクラスでデザインを整えるだけです。
Tailwindを導入できたら、次はユーティリティクラスでレイアウトやUIを組み立てていく段階です。余白・flex・grid・レスポンシブの基本から、ボタンやカードUIの作り方までを実例でまとめた Tailwind CSSの使い方【初心者向け】 を読めば、「で、どうUIを組むの？」が一気に解決します。さらに細かいテクニックとしては、親要素のホバーで子要素のスタイルを変える Tailwind CSSのgroup-hoverの使い方 も参考になります。
なお、Railsの環境構築がまだの方は macOSにRuby on Railsをインストールする方法 をどうぞ。
参考リンク
スポンサーリンク
コメント
Comments are closed.