はじめに

こんにちは、Gakken LEAPのフロントエンドエンジニアの Okuma です。
今回は、RailsアプリケーションにTailwind CSSを導入する手順と、最近発表されたTailwind CSS v4の主な変更点について解説します。
tailwindcss-rails gemを使えば、Railsへの導入は非常に簡単です。また、v4で導入された新しい概念をキャッチアップして、モダンなフロントエンド開発に活かしていきましょう。

Railsにtailwindcssを導入する方法

tailwindcss-railsという便利なgemを使用することで、Railsプロジェクトに簡単にTailwind CSSをセットアップできます。

1. Gemの追加

まず、Gemfileに以下の行を追加します。（今回はv4がインストールされることを想定しています）

gem "tailwindcss-rails"

2. bundle installの実行

ターミナルで以下のコマンドを実行し、gemをインストールします。

bundle install

3. Tailwind CSSのインストール

次に、以下のコマンドを実行して、Tailwind CSSをアプリケーションにインストールします。

rails tailwindcss:install

このコマンドにより、以下のファイルが生成・更新されます。

app/assets/tailwind/application.css：CSSの読み込み + 設定ファイル。
Procfile.dev：bin/devでTailwindのwatchプロセスを起動するための設定が追加されます。

インストール後、bin/devコマンドで開発サーバーを起動すると、Tailwind CSSのコンパイルも同時に行われるようになります。

bin/dev

これで、RailsでTailwind CSSを使用する準備が整いました。あとはapp/views以下のファイルでTailwind CSSのクラスユーティリティを使ってスタイリングしていくだけです。

Tailwind CSS v4の主な変更点

Tailwind CSS v4は、「より速く、よりシンプルに、よりパワフルに」をテーマに、多くの改善が施されました。特に設定方法とパフォーマンスが大きく変わっています。

1. 新エンジンによるパフォーマンスの劇的な向上

v4では、Rustで書かれたCSSパーサー/トランスフォーマーである Lightning CSS を内部的に採用した新しいエンジンが搭載されました。これにより、ビルド速度が大幅に向上し、特に大規模なプロジェクトでの開発体験が格段に改善されます。

2. 設定ファイル不要へ：「CSS-first」アプローチ

v4の最も象徴的な変更が、tailwind.config.jsが原則不要になったことです。

これまでは、contentに対象ファイルパスを指定する必要がありましたが、v4ではプロジェクト内のクラス名を自動的に検出します。
基本的な使い方であれば、設定ファイルなしで、メインのCSSファイルに以下の一行を記述するだけで動作します。

@import "tailwindcss";

これにより、Node.jsランタイムへの依存が減り、様々なフレームワークとよりシンプルに統合できるようになりました。

3. CSS内で完結するテーマカスタマイズ「`@theme`」

tailwind.config.jsで行っていたカスタマイズは、新しく導入された@themeディレクティブを使い、CSSファイル内で直接記述できるようになりました。

変更点の比較
例えば、v3で以下のようにtailwind.config.jsで設定していたカスタマイズは…

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#1fb6ff',
      },
      fontFamily: {
        'sans': ['Inter', 'sans-serif'],
      },
      screens: {
        '3xl': '1920px',
      },
    },
  },
}

v4では、以下のようにCSSファイル内に記述します。

application.css

@import "tailwindcss";

@theme {
  /* `colors` は直接 `--color-*` 形式で定義 */
  --color-brand: #1fb6ff;

  /* `fontFamily` は `--font-family-*` 形式で定義 */
  --font-family-sans: "Inter", "sans-serif";

  /* `screens` は `@screen` ルールで定義 */
  @screen "3xl" {
    min-width: 1920px;
  }
}

このように、JavaScriptの設定ファイルを介さずに、CSSの構文で直感的にテーマを拡張できます。oklch()のようなモダンな色指定もサポートされています。

4. Vite/Vite-Rubyとの親和性向上

公式のViteプラグイン (@tailwindcss/vite) もv4に合わせて刷新されました。
これまで必要だったpostcss.config.jsの設定が不要になり、Viteプロジェクトへの導入が非常に簡単になりました。RailsでVite-Rubyを使っている場合でも、この恩恵を受けることができます。

5. 互換性とスムーズな移行

v4は大きな変更を含みますが、v3からの移行をサポートするための互換性ビルド（compatibility build）が用意されています。
これにより、既存のtailwind.config.jsを使い続けながら、v4の新しいエンジンや機能を段階的に試すことが可能です。

まとめ

今回は、Railsにtailwindcss-railsを導入する基本的な手順と、Tailwind CSS v4の主要な変更点について解説しました。

v4では、設定方法がCSS中心のシンプルなアプローチに移行し、パフォーマンスも大幅に向上したことで、これまで以上に手軽かつ強力なツールになっています。

Rails開発におけるフロントエンドの選択肢として、ぜひTailwind CSSの導入とv4へのアップデートを検討してみてください。

一点注意点としてはESLintのtailwindcssプラグインがまだv4に対応していないため、Linterが認識できないためのエラーが発生する可能性があるため、そちらはご注意ください。
https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/325

エンジニア募集中

Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！

参考

Tailwind CSS v4.0