This episode is for subscribers only.

By subscribing you will get access to all the videos and source code. You also support me to create more content.

Upgrading Tailwind CSS from v3 to v4 in Rails #228

02/02/2025
Pro
tailwindcss

Keep your dependencies updated!

Tailwind 4 can be configured in the CSS file (no need of tailwind.config.js)

However you need to first update tailwind.config.js in a very specific way to run the upgrade command smoothly.

I highly recommend you to read the official release notes & upgrade guide to be familiar with the latest syntax.

Official upgrade guide: [member-only link]
Gem tailwindcss-rails: [member-only link]
Episode source code: [member-only link]

0:00 About Tailwind 4 on Rails
1:21 Old Tailwind setup
3:13 Run upgrade tool
5:50 Borrow best practices from new app
7:24 Prepare Yarn/NPM upgrade package
9:20 Run upgrade command
10:24 Tailwind Watch not working
11:35 Fix aspect ratio
12:15 Fix dialogs
13:00 Fix opacity