Railsを使ったWebアプリの企画中、「イケてるUIのアプリにしたい！けど、Bootstrapはみんな使ってるから、なんかイヤだ...！」と思い、Tailwind CSSというCSSフレームワークをRailsに導入しました。
しかし、導入方法をGoogle検索すると、検索結果トップ記事それぞれで導入手順の解説内容がバラバラで、いったいどのやり方で導入すれば使えるようになるのかが分かりにくい...というのが現状です（実際、ボク自身も間違ったやり方で導入して、丸一日ムダにしてしまいました...）
そこで、「RailsへTailwind CSSを導入〜実際に使えるようになるまで」の実装手順をまとめました。
RailsへTailwind CSSを導入して使えるようになるまで手順説明は、次の内容でまとめました。
- 開発環境
- 実装の準備
- 具体的な実装内容 《本編》
「開発環境」では、本記事で解説する内容がローカル・本番（サービス：render・DB：PostgreSQL）の両方で正しく挙動したことを実際に視認できた環境を整理しました。「実装の準備」では、Tailwind CSSを導入する前段階で必要になるアプリの雛形の作成手順を整理しました。「具体的な実装内容《本編》」では、Tailwind CSS公式ドキュメントに則って、本記事のテーマとなる実装を、できる限り細かく解説しました。
開発環境
| Category | Value,Version |
|---|---|
| OS | MacOS Sonoma 14.1.2 |
| Ruby | 3.2.0 |
| Ruby on Rails | 7.0.8 |
| Gem | tailwindcss-rails |
| Infrastructure | render |
*Gem：Ruby専用拡張機能（Ruby用ライブラリ）
実装の準備
ここでは、Tailwind CSSの導入自体はおこなわず、アプリの雛形（トップページにindex.html.erbの「Hello world!」を表示させるだけ）を作成します。
まず、アプリの土台をつくります。
% rails _7.0.0_ new ◯◯◯（アプリ名） -d mysql # "-d mysql"はお好みで
% cd ◯◯◯（アプリ名）
% rails db:create
次に、config/database.yml内のencoding: utf8mb4 をencoding: utf8へ変更します。
default: &default
encoding: utf8
そして、トップページでビューファイルを表示させるために、ルーティングとコントローラーの設定を、次の順番で実装します。
Rails.application.routes.draw do
root "articles#index"
end
↓
% rails g controller articles
↓
class ArticlesController < ApplicationController
def index
end
end
最後に、コントローラー生成と同時にapp/views/articlesディレクトリへ自動生成されたindex.html.erbの中身を作成します。
<h1>Hello world!</h1>
ターミナルでrails sでサーバーを起動してlocalhost:3000へアクセスし、トップページに「Hello world!」と表示がされるかどうかを確認しましょう（確認できたら、サーバーを一旦落としましょう）
具体的な実装内容《本編》
それでは、Tailwind CSSをRailsへ実際に導入していく手順を、次の順番で説明します。
- 導入編
- オススメのデフォルト設定変更編
- 使いこなす編
Tailwind CSS 《導入編》
まず、ターミナルで以下のコマンドを順に実行。
% bundle add tailwindcss-rails
% rails tailwindcss:install
ターミナルに以下の表示が出れば、成功です。
Add Tailwindcss include tags and container element in application layout
insert app/views/layouts/application.html.erb
insert app/views/layouts/application.html.erb
insert app/views/layouts/application.html.erb
Build into app/assets/builds
create app/assets/builds
create app/assets/builds/.keep
append app/assets/config/manifest.js
append .gitignore
Add default config/tailwindcss.config.js
create config/tailwind.config.js
Add default app/assets/stylesheets/application.tailwind.css
create app/assets/stylesheets/application.tailwind.css
Add default Procfile.dev
create Procfile.dev
Ensure foreman is installed
run gem install foreman from "."
Successfully installed foreman-0.87.2
Parsing documentation for foreman-0.87.2
Done installing documentation for foreman after 0 seconds
1 gem installed
Add bin/dev to start foreman
create bin/dev
Compile initial Tailwind build
run rails tailwindcss:build from "."
そして、事前準備で作成しておいたindex.html.erbのh1タグのclass属性へ"text-3xl font-bold underline"という記述を追加します。
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
最後に、rails sではなく、./bin/devというコマンドでサーバーを再起動します。
％ ./bin/dev
これで、「Hello world!」がさっきと違う”イイ感じ”に表示されれば、導入は成功です 
お疲れ様でした
Tailwind CSS 《オススメのデフォルト設定変更編》
ここでは、RailsでTailwind CSSの記法を使ってCSS実装する前に済ませておくことをオススメするTailwind CSSのデフォルト設定変更を、いくつかまとめました。
- オススメ変更①：レイアウトテンプレートの変更
- オススメ変更②：フォントの変更
「CSSを正しく当ててるはずなのに、思い通りの表示が出ないぞ？」という違和感は、デフォルト設定が原因である場合も多いので、気になる方は設定変更してみてください。
オススメ変更①：レイアウトテンプレートの変更
オススメ変更一つ目は「レイアウトテンプレートの変更」です。
具体的には、application.html.erb 内の <main> タグで囲んで付与されているデフォルトのCSS装飾をなくします。
application.html.erb ファイルを、次のように編集してください。
<!-- 変更前 -->
<!DOCTYPE html>
<html>
<head>
<title>（アプリ名）</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <!-- ←より、Tailwind CSSが適用されていることがわかります -->
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<!-- <main>タグで囲んで付与されているデフォルトのCSS装飾 -->
<main class="container mx-auto mt-28 px-5 flex"><%= yield %></main>
</body>
</html>
↓
↓
↓
<!-- 変更後 -->
<!DOCTYPE html>
<html>
<head>
<!-- 〜〜省略〜〜 -->
</head>
<body>
<!-- <main> タグを外して、<%= yield %> だけに -->
<%= yield %> <!-- <%= yield %>：body要素内に各viewファイルの記述を集約させるメソッド -->
</body>
</html>
ブラウザで確認して問題がない、つまり基準位置、いわゆる「左上」に要素が来ていれば、「レイアウトテンプレート変更」完了です
「レイアウトテンプレート変更」の目的は、<body> 全体にかかっているCSS装飾をまっさらにすることで、位置や余白の基準をわかりやすくするためです。
たとえば、初期設定のままでは、画面幅に応じた最大横幅・上下左右の間隔・display: flex; ... などのCSS装飾が自動的に付与されています。
なので、このまま index.html.erb 等でviewファイルを生成しても、「左上」に要素が来ません。
なので、「レイアウトテンプレートの変更」は先におこない、余計なCSS装飾がかからないようにすることをオススメします。
オススメ変更②：フォントの変更
オススメ変更二つ目は「フォントの変更」です。
具体的には、tailwind.config.js 内のフォント種に関するデフォルト設定をなくします。
tailwind.config.js ファイルを、次のように編集してください。
//変更前
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")],
};
↓
↓
↓
//変更後
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: ["./public/*.html", "./app/helpers/**/*.rb", "./app/javascript/**/*.js", "./app/views/**/*.{erb,haml,html,slim}"],
theme: {
extend: {
// フォント種に関するデフォルト設定ナシ
},
},
plugins: [require("@tailwindcss/forms"), require("@tailwindcss/aspect-ratio"), require("@tailwindcss/typography"), require("@tailwindcss/container-queries")],
};
ブラウザで確認して、問題がなければ「フォントの変更」完了です
Tailwind CSS 《使いこなす編》
Tailwind CSSを自分の開発工程で自由自在に使いこなすためには、次のステップが必要です。
- Tailwind CSS独特の記法を覚える
- UIコンポーネントサイトを参照する
まず、Tailwind CSS独特の記法を覚える必要があります。
個人的には「チートシートを徹底的に活用する」と効率的に覚えられる実感があります。
参考：Tailwind CSS Cheat Sheet
ちなみに、アプリの雛形をつくらないでただ挙動を確認したいだけなら、以下のサイトでチェックするのが便利です。
参考：Tailwind Play
次に、Tailwind CSSを使って実現できるUIを確認できるコンポーネントサイトもチェックしましょう。
個人的に使いやすいと感じるTailwind CSS用コンポーネントサイトを3つ共有しておきます。
プログラミング学習のアウトプット、以上になります。
ご指摘あれば、お気軽にコメントください。