RailsでTailwind CSSとdaisyUIを使用する

RailsプロジェクトにCSSフレームワークを導入したいと思っても、大抵のCSSフレームワークはnpmなどのパッケージマネージャーで管理されていることが多く、Railsで利用する方法が不明瞭です。

Tailwind CSSについてはRails作者によるgemが存在していて、また、Tailwind CSSプラグインのdaisyUIはRails用のインストール方法がドキュメントに記載されていましたのでRailsからの利用を試してみました。

参考手順

Tailwind CSS for RailsのReadme rails / tailwindcss-rails
daisyUIのドキュメント Install daisyUI for Rails

既存のRailsプロジェクトにTailwind CSSを組み込む

bundle add tailwindcss-rails
bundle exec rails tailwindcss:install

実行結果

$ bundle add tailwindcss-rails
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Fetching gem metadata from https://rubygems.org/.........
Fetching tailwindcss-ruby 4.1.18 (x86_64-linux-gnu)
Installing tailwindcss-ruby 4.1.18 (x86_64-linux-gnu)
Fetching tailwindcss-rails 4.4.0
Installing tailwindcss-rails 4.4.0

実行結果

$ bundle exec rails tailwindcss:install
       apply  /workspaces/tvnote/vendor/bundle/ruby/3.4.0/gems/tailwindcss-rails-4.4.0/lib/install/install_tailwindcss.rb
  Add Tailwindcss container element in application layout
  Build into app/assets/builds
      create    app/assets/builds
      create    app/assets/builds/.keep
      append    .gitignore
  Add default /workspaces/tvnote/app/assets/tailwind/application.css
      create    app/assets/tailwind/application.css
  Add default Procfile.dev
      create    Procfile.dev
  Ensure foreman is installed
         run    gem install foreman from "."
Fetching foreman-0.90.0.gem
Successfully installed foreman-0.90.0
1 gem installed

A new release of RubyGems is available: 3.6.7 → 4.0.3!
Run `gem update --system 4.0.3` to update your installation.

  Add bin/dev to start foreman
       force    bin/dev
  Compile initial Tailwind build
         run    rails tailwindcss:build from "."
≈ tailwindcss v4.1.18

Done in 77ms
         run  bundle install --quiet

Live rebuild設定

複数手段が提供されていますが、普段通りrails sで起動したいのでPuma pluginの設定をしました。

config/puma.rbに以下の内容を追加

plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development"

daisyUIを追加

app/assets/tailwind/にdaisyUIのjsファイルをダウンロードして配置します。

curl -sLo app/assets/tailwind/daisyui.mjs https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.mjs
curl -sLo app/assets/tailwind/daisyui-theme.mjs https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.mjs

app/assets/tailwind/application.cssに以下の内容を追加します。

@source not "./daisyui{,*}.mjs";
@plugin "./daisyui.mjs" {
    exclude: properties;
}

exclude: properties;の指定をしない場合は、以下の警告が出てしまう。

/*! 🌼 daisyUI 5.5.14 */
Found 1 warning while optimizing generated CSS:

│ }
│ @layer base {
│   @property --radialprogress {
┆            ^-- Unknown at rule: @property
┆
│     syntax: "<percentage>";
│     inherits: true;

無視しても良いようですが、issueの内容を参照してexclude指定を追加しました。

bug: Nested @property causes PostCSS build warnings