【Rails7】TailwindCSS + daisyUIを導入する
Rails7系に、流行りの「TailwindCSS」とそのTailwindをベースとしたCSSライブラリ「daisyUI」を入れようとしたら、Rails7系の自由さゆえに少し戸惑ったぜ、、、っていうメモです。
↓こちらがTailwindCSSとdaisyUIでデザインしたWebサービス
Rails7系のフロントエンド事情
Rails7系のアプリは個人的な趣味と転職用のポートフォリオを兼ねて作っています。バージョンは最新安定版の7.0.3を採用することにしました。
識者のブログを読み漁って6系との違いを調べてみたら、要は「ES6やHTTP2に代表される昨今のフロントエンドの進化によって、webpackerはその役目を終え、7系ではいくつか用意されているオプションの中から好きなバンドル方式を選べるようになった」ようです。
TailwindCSSとdaisyUI
話は変わってTailwindCSS。このフレームワークはコンポーネントが準備されておらず、自分でutility classを組み合わせてCSSスタイルを作っていかなければなりません。
完全に“なんか流行ってるっぽい”からTailwindを触ることにしたのですが、非デザイナーとしてはBootstrap同様“フレームワーク側でいい感じにしといて”ほしい。なので、TailwindベースのCSSライブラリdaisyUIも一緒に入れることにしました。
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を導入してみる（失敗）
cssbundling-railsと比較したときにtailwindcss-railsのスター数が多いことと、またrails7系が脱node.jsの世界観を推していることから、importmap-rails + tailwindcss-railsでTailwindCSSとdaisyUIを導入することにしました。
先に言うとこの構成は失敗しました。正確には、tailwindは使えたけど、daisyUIが使えなかった。
失敗しましたが何をやったかまとめておきます。導入にあたっては、こちらのブログが参考になりました。
なお、下記はrails new済みの状態から始めています。
まず、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ファイルを設定します。
module.exports = {
//...
plugins: [require("daisyui")],
}
これでdaisyUIが使えるはず、と./bin/devコマンドでサーバーを動かすと下記のエラーが。
$ Error: Cannot find module 'daisyui'
んー？ daisyuiはさっきimportmapでインストールしたぞ？？？
原因がわからずしばらくネットの海をさまよっていると、全く同じことを質問している人を発見。
あっ、スタンドアロンのtailwindcss-cliは、サードパーティのプラグインが使えないんスね。。。解散！
jsbundling-rails + cssbundling-railsでTailwindCSS + daisyUIを導入してみる（成功）
脱node.jsはうまくいかなかったので、おとなしくjsbundling-railsとcssbundling-railsでtailwindCSSとdaisyUIを入れることにしました。
先ほど行ったtailwindcss-rails、importmap-rails関連の変更をすべて取り消してから、Gemfileに下記を追加してbundle install。
gem 'cssbundling-rails'
gem 'jsbundling-rails'
下記コマンドでtailwindをインストールします。
$ bundle exec rails css:install:tailwind
slimを使っている場合は、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者の比較はこちらのブログが参考になります。
今回は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を編集。
module.exports = {
//...
plugins: [require("daisyui")],
}
ビューにdaisyUIのクラスをあてて、./bin/devでサーバーを起動します。
スタイルがあたっています！ 成功です。
余談
Rails7系 + tailwindCSSの環境下でscaffoldを使うと、勝手にいい感じのtailwindのスタイルをあててくれます。
Discussion