【Rails7】TailwindCSS + daisyUIを導入する

Rails7系に、流行りの「TailwindCSS」とそのTailwindをベースとしたCSSライブラリ「daisyUI」を入れようとしたら、Rails7系の自由さゆえに少し戸惑ったぜ、、、っていうメモです。

↓こちらがTailwindCSSとdaisyUIでデザインしたWebサービス

https://torikomi.fly.dev/

Rails7系のフロントエンド事情

https://qiita.com/ryohashimoto/items/f5382478c78f296d8291

https://zenn.dev/kenzan100/articles/0f9b100655a4bf

Rails7時代のJS/CSSバンドルの新常識

Rails7系のアプリは個人的な趣味と転職用のポートフォリオを兼ねて作っています。バージョンは最新安定版の7.0.3を採用することにしました。

識者のブログを読み漁って6系との違いを調べてみたら、要は「ES6やHTTP2に代表される昨今のフロントエンドの進化によって、webpackerはその役目を終え、7系ではいくつか用意されているオプションの中から好きなバンドル方式を選べるようになった」ようです。

https://rochefort.hatenablog.com/entry/webpacker_has_been_retired

TailwindCSSとdaisyUI

https://tailwindcss.jp/

話は変わってTailwindCSS。このフレームワークはコンポーネントが準備されておらず、自分でutility classを組み合わせてCSSスタイルを作っていかなければなりません。

完全に“なんか流行ってるっぽい”からTailwindを触ることにしたのですが、非デザイナーとしてはBootstrap同様“フレームワーク側でいい感じにしといて”ほしい。なので、TailwindベースのCSSライブラリdaisyUIも一緒に入れることにしました。

https://daisyui.com/

daisyUI、かわいくてコンポーネント豊富でいい感じ。これならBootstrapみたいな感覚で使えそう（それならBootstrap使え）。

daisyUIは、tailwindCSSとnode.jsがインストールされている環境にnpm経由でインストールするか、CDN経由でインストール（非推奨）して使います。

Rails7系にTailwindCSSを入れる方法は2つ

私が認識しているところではRails7系にTailwindCSSを入れる方法は2つあり、tailwindcss-railsというgemを使ってtailwindcss-cliバイナリをインストールするか、cssbundling-railsというgemでRailsのアセットパイプラインにtailwindをのせるかです。

importmap-rails + tailwindcss-railsでTailwindCSS + daisyUIを導入してみる（失敗）

https://github.com/rails/importmap-rails

https://github.com/rails/tailwindcss-rails

cssbundling-railsと比較したときにtailwindcss-railsのスター数が多いことと、またrails7系が脱node.jsの世界観を推していることから、importmap-rails + tailwindcss-railsでTailwindCSSとdaisyUIを導入することにしました。

https://zenn.dev/takeyuweb/articles/996adfac0d58fb

先に言うとこの構成は失敗しました。正確には、tailwindは使えたけど、daisyUIが使えなかった。

失敗しましたが何をやったかまとめておきます。導入にあたっては、こちらのブログが参考になりました。

https://zenn.dev/takahashim/articles/702b165b2a0fd7

なお、下記はrails new済みの状態から始めています。

まず、Gemfileに

Gemfile

gem 'tailwindcss-rails'

を追記して、下記2行を実行。

$ bundle install
$ bundle exec rails tailwindcss:install

Tailwindに関してはこれだけ。なお、私はテンプレートエンジンにslimを使っていたので、app/views/application.html.slimに= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"を手動で追加する必要がありました。erbだったら、tailwindcss:installしたときに自動で追加されているはず。

次にdaisyUIをimportmap経由でインストールします。importmapのgemはRails7系であれば標準でインストールされています。下記のコマンドでimportmapにdaisyUIをpinして、JavaScript CDN経由で使えるようにします。

./bin/importmap pin daisyui
Pinning "daisyui" to https://ga.jspm.io/npm:daisyui@2.19.0/src/index.js
Pinning "buffer" to https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/buffer.js
Pinning "camelcase-css" to https://ga.jspm.io/npm:camelcase-css@2.0.1/index-es5.js
Pinning "color" to https://ga.jspm.io/npm:color@4.2.3/index.js
Pinning "color-convert" to https://ga.jspm.io/npm:color-convert@2.0.1/index.js
Pinning "color-name" to https://ga.jspm.io/npm:color-name@1.1.4/index.js
Pinning "color-string" to https://ga.jspm.io/npm:color-string@1.9.1/index.js
Pinning "css-selector-tokenizer" to https://ga.jspm.io/npm:css-selector-tokenizer@0.8.0/lib/index.js
Pinning "cssesc" to https://ga.jspm.io/npm:cssesc@3.0.0/cssesc.js
Pinning "fastparse" to https://ga.jspm.io/npm:fastparse@1.1.2/lib/Parser.js
Pinning "fs" to https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/fs.js
Pinning "is-arrayish" to https://ga.jspm.io/npm:is-arrayish@0.3.2/index.js
Pinning "nanoid/non-secure" to https://ga.jspm.io/npm:nanoid@3.3.4/non-secure/index.cjs
Pinning "path" to https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/path.js
Pinning "picocolors" to https://ga.jspm.io/npm:picocolors@1.0.0/picocolors.browser.js
Pinning "postcss" to https://ga.jspm.io/npm:postcss@8.4.14/lib/postcss.js
Pinning "postcss-js" to https://ga.jspm.io/npm:postcss-js@4.0.0/index.js
Pinning "process" to https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/process-production.js
Pinning "simple-swizzle" to https://ga.jspm.io/npm:simple-swizzle@0.2.2/index.js
Pinning "source-map-js" to https://ga.jspm.io/npm:source-map-js@1.0.2/source-map.js
Pinning "tailwindcss/plugin" to https://ga.jspm.io/npm:tailwindcss@3.1.5/plugin.js
Pinning "url" to https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/url.js

いろいろpinされました。うまくいったようです。最後にtailwindのconfigファイルを設定します。

config/tailwind.config.js

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

これでdaisyUIが使えるはず、と./bin/devコマンドでサーバーを動かすと下記のエラーが。

$ Error: Cannot find module 'daisyui'

んー？　daisyuiはさっきimportmapでインストールしたぞ？？？

原因がわからずしばらくネットの海をさまよっていると、全く同じことを質問している人を発見。

https://stackoverflow.com/questions/71946463/rails-7-using-daisyui-with-importmap-rails

あっ、スタンドアロンのtailwindcss-cliは、サードパーティのプラグインが使えないんスね。。。解散！

jsbundling-rails + cssbundling-railsでTailwindCSS + daisyUIを導入してみる（成功）

https://github.com/rails/jsbundling-rails

https://github.com/rails/cssbundling-rails

脱node.jsはうまくいかなかったので、おとなしくjsbundling-railsとcssbundling-railsでtailwindCSSとdaisyUIを入れることにしました。

先ほど行ったtailwindcss-rails、importmap-rails関連の変更をすべて取り消してから、Gemfileに下記を追加してbundle install。

Gemfile

gem 'cssbundling-rails'
gem 'jsbundling-rails'

下記コマンドでtailwindをインストールします。

$ bundle exec rails css:install:tailwind

slimを使っている場合は、tailwind.config.jsの設定に注意してください。

tailwind.config.js

module.exports = {
  content: [
-   './app/views/**/*.html.erb',
+   './app/views/**/*.html.slim',
    //...
  ]
}

これでtailwindまわりの設定は完了。次にdaisyUIをnode.js経由でインストールします。

なお、jsbundling-railsではJSバンドラーをesbuild、webpacker、rollupの3つから選択します。3者の比較はこちらのブログが参考になります。

https://codezine.jp/article/detail/16059

今回はRais生みの親DHHのおすすめ、esbuildを使うことにします。

$ bundle exec rails javascript:install:esbuild

slimの場合は、app/views/application.html.slimに= javascript_include_tag "application", "data-turbo-track": "reload", defer: trueを手動で追記します。

そして、ふつうにyarnでdaisyUIをインストール。

$ yarn add daisyui

tailwind.config.jsを編集。

tailwind.config.js

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

ビューにdaisyUIのクラスをあてて、./bin/devでサーバーを起動します。

スタイルがあたっています！　成功です。

余談

Rails7系 + tailwindCSSの環境下でscaffoldを使うと、勝手にいい感じのtailwindのスタイルをあててくれます。