msducheminjr

msducheminjr

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.

Marked As Solved

rubys

rubys

Author of Agile Web Development With Rails

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.

Also Liked

rubys

rubys

Author of Agile Web Development With Rails

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:

Where Next?

Popular Pragmatic Bookshelf topics Top

brianokken
Many tasks_proj/tests directories exist in chapters 2, 3, 5 that have tests that use the custom markers smoke and get, which are not decl...
New
GilWright
Working through the steps (checking that the Info,plist matches exactly), run the demo game and what appears is grey but does not fill th...
New
HarryDeveloper
Hi @venkats, It has been mentioned in the description of ‘Supervisory Job’ title that 2 things as mentioned below result in the same eff...
New
gilesdotcodes
In case this helps anyone, I’ve had issues setting up the rails source code. Here were the solutions: In Gemfile, change gem 'rails' t...
New
Chrichton
Dear Sophie. I tried to do the “Authorization” exercise and have two questions: When trying to plug in an email-service, I found the ...
New
jgchristopher
“The ProductLive.Index template calls a helper function, live_component/3, that in turn calls on the modal component. ” Excerpt From: Br...
New
brunogirin
When running tox for the first time, I got the following error: ERROR: InterpreterNotFound: python3.10 I realised that I was running ...
New
Henrai
Hi, I’m working on the Chapter 8 of the book. After I add add the point_offset, I’m still able to see acne: In the image above, I re...
New
a.zampa
@mfazio23 I’m following the indications of the book and arriver ad chapter 10, but the app cannot be compiled due to an error in the Bas...
New
dtonhofer
@parrt In the context of Chapter 4.3, the grammar Java.g4, meant to parse Java 6 compilation units, no longer passes ANTLR (currently 4....
New

Other popular topics Top

AstonJ
Or looking forward to? :nerd_face:
New
AstonJ
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
New
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
AstonJ
Seems like a lot of people caught it - just wondered whether any of you did? As far as I know I didn’t, but it wouldn’t surprise me if I...
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
New
New
PragmaticBookshelf
Author Spotlight: Karl Stolley @karlstolley Logic! Rhetoric! Prag! Wow, what a combination. In this spotlight, we sit down with Karl ...
New
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
New

Sub Categories: