When you generate a new Rails, app, there is no version constraint on tailwindcss-rails in the Gemfile. The gem released version 4.0.x on 2025-02-04. The upgrade from 3 to 4 moves configuration out of JavaScript and into CSS and has a few classes that change.
One example is the movement of the tailwind.css file in the app from app/assets/stylesheets/application.tailwind.css to app/assets/tailwind/application.css.
One of the changes that will affect the book from upgrading can be found on page 174 when adding the .input-field @apply directive:
/* Old file application.tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.input-field {
@apply block shadow rounded-md border border-green-400 outline-none px-3 py-2 mt-2 w-full
}
}
/* After running upgrade script - new file tailwind/application.css */
@import 'tailwindcss';
/* The upgrade tool adds a block about the default border color that exists on upgrades, but is not there in newly generated apps. */
@utility input-field {
@apply block shadow-sm rounded-md border border-green-400 outline-hidden px-3 py-2 mt-2 w-full;
}
This is a commit where I upgraded an app that has made it through Task J: Internationalization. Most of the changes of the code for the book are replacing shadow with shadow-sm and outline-none with outline-hidden.
If the chore of going through the book and updating all the Tailwind to version 4 is not worth the effort, the book needs a note on constraining the version to 3.3.x in the Gemfile.