# Upgrading Tailwind CSS from v3 to v4 in Rails #228

- URL: https://superails.com/posts/tailwind-4-upgrade-228
- Published: 2025-02-02
- Duration: 13:49
- Access: subscribers only
- Topics: tailwindcss
- Playlists: Tailwind on Rails

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


## Chapters

- 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

## Transcript

Available to subscribers at https://superails.com/posts/tailwind-4-upgrade-228