はじめに
こんにちは、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で設定していたカスタマイズは…
module.exports = {
theme: {
extend: {
colors: {
'brand': '#1fb6ff',
},
fontFamily: {
'sans': ['Inter', 'sans-serif'],
},
screens: {
'3xl': '1920px',
},
},
},
}
v4では、以下のように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 では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！