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.css
tailwind.config.js

3.確認用ページの追加

コントローラーとビューの追加

rails generate controller Home index

これにより、以下のファイルが生成されます：

app/controllers/home_controller.rb
app/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