TailwindCSS v4 - upgrade experience report · rails/tailwindcss-rails · Discussion #450 (original) (raw)

@drale2k @mwala-zm @flavorjones

I think I've found a better way to handle plugin migrations without relying on the npm -g flag or npm install, which somehow defaults to my home directory as the node package directory if there’s no package.json in my working directory (maybe it’s because of mise). Anyway, let’s get started!!

Guide

Warning

To replace the class names accordingly for v4, go to config/tailwind.config.js update the content part to:

content: [ '../public/.html', '../app/helpers/**/.rb', '../app/javascript//*.js', '../app/views//*.{erb,haml,html,slim}' ],

( Just add an additional . to all the paths referenced )

If you’re not using any JS tooling, do the following:

After updating tailwindcss-rails, add the following line to the .gitignore file:

(So the Tailwind update tool won’t dig through your node_modules files and infer incorrect migrations, because it complies with .gitignore constraints)

Then create a package.json in the root of the project:

{ "name": "app_name", "version": "1.0.0", "dependencies": { "tailwindcss": "^3.4.17", // Mandatory!! // Install all plugins and modules that are referenced in tailwind.config.js "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/forms": "^0.5.10", "@tailwindcss/typography": "^0.5.16" // And so on... } }

Now the upgrade task should run fine.

Delete package.json, node_modules/ and package-lock.json (or yarn.lock), remove /node_modules from .gitignore.

Go to your CSS file and remove the following line (if present):

@plugin '@tailwindcss/container-queries';

If there’s something I’m missing, anyone can feel free to point it out. Improvements on this procedure or better solutions—please share. Thanks!