Agile Web Development with Rails 8: Tailwind 4 Minor Breaking Changes (whole book, beta 3)

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.

I spent pretty much all day yesterday working through exactly that,… though I was working from a clean slate (running the book script from the beginning). I’ve got it all working, and I opened a bug in the process: field outlines are hidden - even when focus is applied. · Issue #489 · rails/tailwindcss-rails · GitHub

I imagine it would be harder to start with Tailwind 3.3 and convert in the middle, but future readers will start fresh with Tailwind 4.

1 Like

Here is my app/assets/tailwind/application.css:

@import "tailwindcss";

.input-field {
  @apply
  block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full
  border-gray-400 focus:outline-blue-600 focus:outline-solid
}

.field_with_errors .input-field {
  @apply
  border-red-400 focus:outline-red-600
}

Example excerpt from app/views/orders/_form.html.erb:

          <div class="my-5">
             <%= form.label :name %>
             <%= form.text_field :name, class: "input-field" %>
          </div>

Footnotes will include:

1 Like