1.プロジェクトの作成
rails new rails_tailwind -j esbuild
cd rails_tailwind
2.Tailwind CSSとForemanのインストール
Gemの追加
bundle add tailwindcss-rails foreman
Tailwind CSSのセットアップ
rails tailwindcss:install
これにより、以下のようなファイルが自動的に生成されます：
app/assets/stylesheets/application.tailwind.csstailwind.config.js
3.確認用ページの追加
コントローラーとビューの追加
rails generate controller Home index
これにより、以下のファイルが生成されます：
app/controllers/home_controller.rbapp/views/home/index.html.erb
ルートの設定
HomeControllerのindexアクションをトップページとして表示するため、config/routes.rbを編集します。
# config/routes.rb
Rails.application.routes.draw do
root "home#index"
end
ビューにTailwind CSSのクラスを追加
app/views/home/index.html.erbを開き、以下の内容を追加します。
<!-- app/views/home/index.html.erb -->
<!DOCTYPE html>
<html>
<head>
<title>Rails Tailwind Example</title>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-8">
<h1 class="text-4xl font-bold text-center text-blue-500 mb-4">Tailwind CSS 導入確認</h1>
<p class="text-lg text-gray-700 text-center">このページが正しくスタイルされていれば、Tailwind CSS の導入に成功しています。</p>
<div class="mt-8 text-center">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">確認ボタン</button>
</div>
</div>
</body>
</html>
4.サーバーを起動して確認
bundle exec foreman start -f Procfile.dev