Zenn
🎨

gem tailwind-railsをv3→v4へアップグレード

に公開
Rails
Tailwind CSS
daysiui
tech

はじめに

こんにちは！Koheiと申します。
今回は Railsのgemであるtailwind-railsのアップグレードについて、記事にまとめておこうと思います。
初学者のため、内容に間違い等ありましたら、優しく教えていただけますと幸いです。

対処の読者

  • gem tailwindrailsをv3でインストールして開発している
  • Daisy UIをv4でインストールして開発している
  • Tailwind v4に興味があり、どうしたら良いのか分からない
  • READMEのアップグレードガイドが英語でわけわからず、お手上げな方

参考

解説する内容は、ほぼほぼ公式の言う通りになります！
参考にした内容は以下です。

公式GitHubリポジトリ
https://github.com/rails/tailwindcss-rails

Tailwind公式　アップグレードガイド
https://tailwindcss.com/docs/upgrade-guide

DaysiUI公式　アップグレードガイド
https://daisyui.com/docs/upgrade/

本編

Gemfileを書き換える

まず、Gemfileを書き換えましょう。
Taiwind-railsを使っている方は下記のような記述があるはずなので、バージョンを書き換えます・

Gemfile
gem "tailwindcss-rails", "~> 4.0"
gem "tailwindcss-ruby" #v3になるように指定していたので、version情報は消しておく。

ターミナルでbundle installします。
Dockerを使っていれば、docker compose exec web bundle installです。

Terminal
bundle install

そうすると、ターミナルが下記のようなログになるはずです。

Terminal
mian@MiANnoMacBook-Air test_tailwind % docker compose exec web bundle install
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...
Fetching tailwindcss-ruby 4.1.5 (aarch64-linux-gnu) (was 3.4.17)
Installing tailwindcss-ruby 4.1.5 (aarch64-linux-gnu) (was 3.4.17)
Fetching tailwindcss-rails 4.2.3 (was 3.3.2)
Installing tailwindcss-rails 4.2.3 (was 3.3.2)
WARN: Unresolved or ambiguous specs during Gem::Specification.reset:
      stringio (>= 0)
      Available/installed versions of this gem:
      - 3.1.7
      - 3.1.5
      - 3.1.1
WARN: Clearing out unresolved specs. Try 'gem cleanup <gem>'
Please report a bug if this causes problems.
Bundle complete! 18 Gemfile dependencies, 104 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
Post-install message from tailwindcss-rails:
== Upgrading to Tailwind CSS v4 ==

If you are upgrading to tailwindcss-rails 4.x, please read the upgrade guide at:

  https://github.com/rails/tailwindcss-rails/blob/main/README.md#upgrading-your-application-from-tailwind-v3-to-v4

If you're not ready to upgrade yet, please pin to version 3 in your Gemfile:

  gem "tailwindcss-rails", "~> 3.3.1"

1 installed gem you directly depend on is looking for funding.
  Run `bundle fund` for details

package.jsonにtailwindcssv3を追記

↑上のログを読んで頂くと == Upgrading to Tailwind CSS v4 ==の後に、公式GitHubリポジトリのREADMEを読めと書いています。

読んでみると、「package.jsonに"tailwindcss": "^3.4.17"を絶対かけ！」と書いているのでその通りにします。
（おそらく、npmとyarnでアップグレードするために必要なのだと思います。）

package.json
{
  "name": "app",
  "private": true,
  "devDependencies": {
    "daisyui": "4",
    "esbuild": "^0.25.3",
    "tailwindcss": "^3.4.17" //この追記が必須！
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets"
  },
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.13",
    "postcss": "^8.5.3"
  }
}

私はyarnを使用しているので、yarn installします。
Dockerを使用している方は、docker compose exec web yarn installです。

Terminal
yarn install

そうすると下記のようなログになります。

Terminal
mian@MiANnoMacBook-Air test_tailwind % docker compose exec web yarn install
yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 45.20s.

config/tailwind.config.jsを変更

config/tailwind.config.jsを変更を変更します。書き換えるのは。contentの中です！

よく見ると、階層が変わっていますね。
つまり、v3とv4でtailwindプラグインをいれる位置が変わっるということになります。

ここで、もしDaysi UIなどを使用していれば、pluginsの中も一旦消してください！消さないとエラーになるので⚠️注意！（記事の最後でアップグレードを解説します）

config/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    '../public/*.html',
    '../app/helpers/**/*.rb',
    '../app/javascript/**/*.js',
    '../app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    // require('@tailwindcss/forms'),
    // require('@tailwindcss/typography'),
    // require('@tailwindcss/container-queries'),
  ]
}

アップグレードコマンドを実施する

tailwindのアップグレードを実施します。ターミナルで以下のコマンドを実施。
Dockerの方は、docker compose exec web rails tailwindcss:upgradeです。

Terminal
rails tailwindcss:upgrade
Terminal
mian@MiANnoMacBook-Air graduation_app_pj % docker compose exec web rails tailwindcss:upgrade
       apply  /usr/local/bundle/gems/tailwindcss-rails-4.2.3/lib/install/upgrade_tailwindcss.rb
  Removing references to 'defaultTheme' from /myapp/config/tailwind.config.js
        gsub    config/tailwind.config.js
  Strip Inter font CSS from application layout
        gsub    app/views/layouts/application.html.erb
  Moving /myapp/app/assets/stylesheets/application.tailwind.css to /myapp/app/assets/tailwind/application.css
      create    app/assets/tailwind/application.css
      remove    app/assets/stylesheets/application.tailwind.css
10.8.2
  Running the upstream Tailwind CSS upgrader
         run    npx @tailwindcss/upgrade@4.1.4 --force --config /myapp/config/tailwind.config.js from "."
Need to install the following packages:
@tailwindcss/upgrade@4.1.4
Ok to proceed? (y)

Ok to proceed? (y)と聞かれるので、yキーを押したあとで、Enterキー。

Terminal
Ok to proceed? (y) y

≈ tailwindcss v4.1.4

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.css` 

│ Migrating JavaScript configuration files… 

│ ↳ The configuration file at `./config/tailwind.config.js` could not be automatically migrated to the new CSS configuration format, so your CSS has been updated to load your 
│   existing configuration file. 

│ Migrating templates… 

│ ↳ Migrated templates for configuration file: `./config/tailwind.config.js` 

│ Migrating stylesheets… 

│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.css` 

│ ↳ No PostCSS config found, skipping migration. 

│ Updating dependencies… 

│ ↳ Updated package: `tailwindcss` 

│ Verify the changes and commit them to your repository. 

npm notice
npm notice New major version of npm available! 10.8.2 -> 11.4.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.4.1
npm notice To update run: npm install -g npm@11.4.1
npm notice
  Compile initial Tailwind build
         run    rails tailwindcss:build from "."
≈ tailwindcss v4.1.8

Done in 398ms
         run  bundle install --quiet

これでアップグレードが完了です！
一度。railサーバーやDockerを再起動して、挙動を確かめてみてください！
簡単でしたね！

Daysi UIのアップグレード

私はDaysi UIを使用していたので、それも更新します。
Dockerを使用している方は、docker compose exec web yarn add -D daisyui@latestです。

Terminal
yarn add -D daisyui@latest

下記のようなログが出れば成功です。

Terminal
mian@MiANnoMacBook-Air test_tailwind % docker compose exec web yarn add -D daisyui@latest
yarn add v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ daisyui@5.0.35
info All dependencies
└─ daisyui@5.0.35
Done in 1.10s.

これで、Daysi UIのアップグレードも完了です。
一度。railサーバーやDockerを再起動して、挙動を確かめてみてください！

以上です！お疲れ様でした！

Discussion