With the TailwindCSS 4 beta out, I decided to upgrade my Rails applications. Here are the steps I took to do the upgrade^*:

• Update the tailwindcss-rails gem to the latest version in the Gemfile bundle update tailwindcss-rails.

• Add the tailwindcss-ruby gem to the Gemfile. This gem now allows you to specify the version of TailwindCSS you want to use. You Gemfile should look like this:

gem "tailwindcss-rails"
gem "tailwindcss-ruby", "4.0.0.beta4"

The reference to ‘4.0.0.beta4’ is the latest at the time of writing and you can keep up to date with the latest version on the TailwindCSS Ruby gem page.

• Next run bundle install to install the new gem.

• Run the following command to update the TailwindCSS configuration:

npx @tailwindcss/upgrade@next --config config/tailwind.config.js

I found this step added tailwind to my package.json file. I removed any additions to package.json after running the above command as I am using the tailwindcss-rails gem. It is not needed except for that step.

At this point you should be able to run your Rails application and see the new TailwindCSS 4 styles.

Your application.tailwind.css file should look a lot simpler now and if there is no custom configuration being added to the legacy config/tailwind.config.js file, you can remove it (and the reference to import it in the application.tailwind.css file).

I highly recommend reading the TailwindCSS 4 docs as there is a lot of new features and simplifications.

^*Conditions Apply - these steps are for a Rails application running with the tailwindcss-rails gem.

Please tweet or email me if you have any questions on this. I’ve done a bunch of these upgrades over the past few days and happy to help.