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

belgoros
Following the steps described in Chapter 6 of the book, I’m stuck with running the migration as described on page 84: bundle exec sequel...
New
jeffmcompsci
Title: Design and Build Great Web APIs - typo “https://company-atk.herokuapp.com/2258ie4t68jv” (page 19, third bullet in URL list) Typo:...
New
ianwillie
Hello Brian, I have some problems with running the code in your book. I like the style of the book very much and I have learnt a lot as...
New
simonpeter
When I try the command to create a pair of migration files I get an error. user=&gt; (create-migration "guestbook") Execution error (Ill...
New
lirux
Hi Jamis, I think there’s an issue with a test on chapter 6. I own the ebook, version P1.0 Feb. 2019. This test doesn’t pass for me: ...
New
adamwoolhether
When trying to generate the protobuf .go file, I receive this error: Unknown flag: --go_opt libprotoc 3.12.3 MacOS 11.3.1 Googling ...
New
brian-m-ops
#book-python-testing-with-pytest-second-edition Hi. Thanks for writing the book. I am just learning so this might just of been an issue ...
New
leonW
I ran this command after installing the sample application: $ cards add do something --owner Brian And got a file not found error: Fil...
New
jskubick
I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
New
digitalbias
Title: Build a Weather Station with Elixir and Nerves: Problem connecting to Postgres with Grafana on (page 64) If you follow the defau...
New

Other popular topics Top

AstonJ
A thread that every forum needs! Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
New
brentjanderson
Bought the Moonlander mechanical keyboard. Cherry Brown MX switches. Arms and wrists have been hurting enough that it’s time I did someth...
New
PragmaticBookshelf
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
mafinar
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
gagan7995
API 4 Path: /user/following/ Method: GET Description: Returns the list of all names of people whom the user follows Response [ { ...
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
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
AstonJ
Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
New

Sub Categories: