Rails7 + TailwindCSS + daisyUIの導入で詰まった時の解決手段

概要

Rails7 + TailwindCSS の構成でアプリケーションを作成し、 daisyUI を導入したが表示がうまくいかずに詰まった。

結論

npm で daisyUI をインストールして使用する。

環境

Rails7 でアプリケーション作成時に TailswindCSS を以下のようにして導入

$ rails new MY_APP --css tailwind

　以上のようにアプリ作成を行うと、Gemfileに gem tailwindcss-rails が追加され、このgemによって導入される。

daisyUIの導入

失敗したケースと成功したケース、未検証のケースをそれぞれ記載する。

失敗ケース(CDNによる導入)

方法

application.html.erbのheader部分に 公式サイトのリンクを追記する。

application.html.erb

<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.24.0/dist/full.css" rel="stylesheet" type="text/css" />

起きた問題

tailwindcssで定義されている一部のクラスで色が表示されないなどの問題が起きた。
読み込み順を変更した場合も、同様の事象が起きる。

原因

daisyUIのCDNで提供されるスタイルシート内にリセットcssも含まれていることが原因。
gemで追加したtailwindcssがdaisyUIの不要なクラスを削除できないことが問題。

失敗ケース（importmapによる導入）

importmap を利用して、プラグインとしてdaisyUIを導入しようとした。

方法

ターミナルで以下のコマンドを実行する。
config/importmap.rb に自動でdaisyUIを利用するために必要なものが追記される。

ターミナル

$ rails importmap:install daisyui

config/tailwind.config.js に以下の内容を記述。

config/tailwind.config.js

module.exports = { plugins: [require("daisyui")] }

起きた問題

daisyUIが反映されない。

原因

railsにtailwindcssを導入するために使用している、 gem tailwindcss-rails が importmapを使用した plugins に対応していない。

成功ケース(npmによる導入)

方法

npm によってdaisyUIを導入した。

$ npm i daisyui

config/tailwind.config.js に以下の内容を記述。

config/tailwind.config.js

module.exports = { plugins: [require("daisyui")] }

結果

表示の不具合が起きなくなった。

未検証ケース(tailwindcssの導入方法を変更)

今までのケースはtailwindcssをgem　の tailwindcss-rails を使用して導入することを前提としているが、gem cssbundling-rails で導入した場合は importmapによる daisyUI　の導入ができるかもしれない。

おわりに

記事内の問題点や、未検証ケースを試していただいた場合はコメントにてお知らせいただけると嬉しいです。