【Rails6】 既存AppにTailwindCSSを導入しよう!
技術約5分で読めます
この記事でわかること
- tailwindcss-rails gem を使って、既存の Rails アプリに Tailwind を後から入れる手順
- install で自動生成される3つのファイルが、それぞれ何をしているのか
- bin/dev がない Rails 6 で watch をどう走らせるか
Rails アプリをローカルで起動できること。手順は Rails 6.1 / Tailwind CSS v3 時点のものです（v4 での変更点は本文冒頭の注記を参照）。
概要
TailwindCSSをRailsに導入する方法について言及していきます。
ポイント
この記事は Tailwind CSS v3 時点の手順です。v4（2025年1月）で設定方法が大きく変わり、
tailwind.config.js を使わず CSS の @theme でテーマを書く形になりました。tailwindcss-rails も v4 対応版が出ています。gem を入れて rails tailwindcss:install を叩くという手順の骨格は変わっていませんが、生成されるファイルの中身は下記と異なります。動作環境
端末
- PC : MacBook Air(M1,2020)
- RAM : 8GB
- OS : macOS Monterey(ver12.1)
バージョン
- Ruby : 3.1.2
- Rails : 6.1.7
導入手順
ポイント
以下の手順は Tailwind CSS 公式の Ruby on Rails ガイド を参考にしています。
Gemfileに記述を追加
gem 'tailwindcss-rails'bundle install
bundle installTailwindCSSをinstall
rails tailwindcss:install生成されたファイルの確認
基本的にファイルが自動生成され、記述が追加されますが、念のため確認をします。テーマやプラグインを弄るのはこのファイルです。
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}ビルド元になる CSS です。自分で書くスタイルもここに追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;レイアウトにスタイルシートの読み込みが追加されます。
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>アプリケーション再起動
アプリケーションを起動したままの人は再起動してください。CSS が build されるので、再起動後には TailwindCSS が適用されているはずです。
bin/dev注意
bin/dev がない場合。bin/dev（と Procfile.dev）は Rails 7 以降の仕組みで、Rails 6 のアプリには存在しないことがあります。その場合はターミナルを 2 つ開いて、片方で rails tailwindcss:watch、もう片方で rails s を走らせてください。watch を忘れると、クラスを追加しても CSS が再生成されず「効かない」状態になります。classを適用
あとは自分が使いたい TailwindCSS の class を適用させていくだけです。公式リファレンス で自分が適用したい class を調べて実装してみましょう。
参考リンク
おわりに
今回の記事では、既存のアプリケーションに TailwindCSS を導入する方法について説明しました
もし興味を持っていただけましたら、ぜひ他の記事も読んでいただけるとうれしいです！
(最後に、気づいた方もいらっしゃると思うのですが、絵文字を入れるのは苦手なので、文章に沿った絵文字を挿入するのに、ChatGPTを利用させていただきましたが、いかがでしたでしょうか。不快に思われた方がいたら申し訳ございません)
更新履歴
- ファイル名の分からなかった 3 つのコードブロックに、それぞれのパスをキャプションとして追加。見出しの番号を削除し、導入手順の下に各ステップを入れ子にする形に修正。コードブロックの言語指定を修正（shell→bash、scss→css、javascript→erb）。Rails 6 には bin/dev がない場合があることと、watch を忘れると CSS が再生成されない件を補足。Tailwind CSS v4 で設定方法が変わったことを冒頭に注記。誤字を修正（アプリケーションにに→に）。参考文献に入っていた自サイトトップへのリンクを削除し、裸 URL をタイトル付きに変更。
- OGP Description の修正
