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

sdmoralesma
Title: Web Development with Clojure, Third Edition - migrations/create not working: p159 When I execute the command: user=&gt; (create-...
New
joepstender
The generated iex result below should list products instead of product for the metadata. (page 67) iex&gt; product = %Product{} %Pento....
New
alanq
This isn’t directly about the book contents so maybe not the right forum…but in some of the code apps (e.g. turbo/06) it sends a TURBO_ST...
New
cro
I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into ...
New
patoncrispy
I’m new to Rust and am using this book to learn more as well as to feed my interest in game dev. I’ve just finished the flappy dragon exa...
New
AufHe
I’m a newbie to Rails 7 and have hit an issue with the bin/Dev script mentioned on pages 112-113. Iteration A1 - Seeing the list of prod...
New
taguniversalmachine
It seems the second code snippet is missing the code to set the current_user: current_user: Accounts.get_user_by_session_token(session["...
New
SlowburnAZ
Getting an error when installing the dependencies at the start of this chapter: could not compile dependency :exla, "mix compile" failed...
New
dachristenson
I just bought this book to learn about Android development, and I’m already running into a major issue in Ch. 1, p. 20: “Update activity...
New
dachristenson
@mfazio23 Android Studio will not accept anything I do when trying to use the Transformations class, as described on pp. 140-141. Googl...
New

Other popular topics Top

AstonJ
What chair do you have while working… and why? Is there a ‘best’ type of chair or working position for developers?
New
AstonJ
Or looking forward to? :nerd_face:
483 11975 256
New
Rainer
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
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
rustkas
Intensively researching Erlang books and additional resources on it, I have found that the topic of using Regular Expressions is either c...
New
Maartz
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
New
PragmaticBookshelf
Author Spotlight Rebecca Skinner @RebeccaSkinner Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
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: