Githubアクションでtailwind.cssがアセットパイプラインに追加されていないエラー

• エラー文

Failure/Error: <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

 ActionView::Template::Error:
   The asset "tailwind.css" is not present in the asset pipeline.

原因

• headタグでtailwindとapplicationの2つを読み込んでいた
• 他に原因があったかもしれないが、以下の方法で解決

解決策

• config/initializers/assets.rbにapplication.cssを追加し、application.cssがプリコンパイルされるようにする

Rails.application.config.assets.precompile += %w( application.css )

• application.cssにtailwindcssをインポート

application.css

@import 'tailwind';

• headタグからtailwindを削除し、applicationのみを読み込むように変更

application.html.erb

<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> #この一行を削除
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

• アセットのプリコンパイル実施

bin/rails assets:precompile 

解決に至った経緯

• アセットパイプラインについての知識がなかったため、調べて、概要や仕組みを把握
• アセットのプリコンパイルを実施
• Railsコンソールを開き、以下のコマンドを実施し、プリコンパイルされてどのファイルができたかを確認

Rails.application.assets_manifest.assets

• tailwind.cssの記述があり、アセットパイプラインには正しく読み込めているのを確認

 "tailwind.css"=>"tailwind-8218b64c410698a92872b31a8d63908a862388c729fd2ac15390e54d6f4adbd8.css"

• エラー文から、<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>が原因だと考える
• 該当の一行を削除し、applicationのみを読み込むように設定やファイルを変更
• 解決

感想

• アセットパイプラインについての知識がなかったため、むやみに検索して解決策を実行するよりも、しっかりと概要や仕組みを理解することが解決につながったと思う。