RailsでのTailwindの画像path

今回私は、わからずに苦戦していたのでメモ✍️をします。

画像ファイルは、 app/assets/images/test.jpg においています。

tailwind.config.js

module.exports = {
  theme: {
    extend: {},
    backgroundImage: {
      "top-bg": "url('./app/assets/images/test.jpg')"
    },
  },
};

app/views/home/index.html.erb

<div class="bg-calender-bg min-h-screen bg-cover"></div>

backgroundImageに画像ファイルがある url('./app/assets/images/test.jpg') にしたら
localサーバーで確認しても画像が表示されませんでした。

出来なかった理由

Railsのアセットパイプライン

Railsのアセットパイプラインは、app/assets/images/フォルダにある画像やその他のアセット（CSS、JavaScriptなど）をプリコンパイルして、URLを通じてアクセスできるようにします。この際、アセットはRailsが提供する/assets/パスで公開されます。
ですから、Railsでは、app/assets/images/にある画像が自動的に/assets/というパスで公開されるため、フルパス（app/assets/images/test.jpg）を書く必要がありません。

Tailwind CSSのビルドプロセス

docker compose exec web rails assets:precompile

このコマンドによって、Railsのアセットパイプラインが画像を含むすべてのアセットをプリコンパイルし、/public/assetsディレクトリに配置します。これにより、Railsアプリケーションが静的ファイルを適切に提供できるようになります。

docker compose exec web npm run build

このコマンドにより、Tailwind CSSがtailwind.config.jsの設定を基にCSSファイルを生成します。特にbackgroundImageの設定は、このビルドプロセス中に適用され、最終的にCSSに背景画像が適用される形で出力されます。