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

telemachus
Python Testing With Pytest - Chapter 2, warnings for “unregistered custom marks” While running the smoke tests in Chapter 2, I get these...
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
Alexandr
Hi everyone! There is an error on the page 71 in the book “Programming machine learning from coding to depp learning” P. Perrotta. You c...
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
New
swlaschin
The book has the same “Problem space/Solution space” diagram on page 18 as is on page 17. The correct Problem/Solution space diagrams ar...
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
creminology
Skimming ahead, much of the following is explained in Chapter 3, but new readers (like me!) will hit a roadblock in Chapter 2 with their ...
New
s2k
Hi all, currently I wonder how the Tailwind colours work (or don’t work). For example, in app/views/layouts/application.html.erb I have...
New
rainforest
Hi, I’ve got a question about the implementation of PubSub when using a Phoenix.Socket.Transport behaviour rather than channels. Before ...
New

Other popular topics Top

Exadra37
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
New
AstonJ
If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol: bre...
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
Help
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
New
AstonJ
This is a very quick guide, you just need to: Download LM Studio: https://lmstudio.ai/ Click on search Type DeepSeek, then select the o...
New
Fl4m3Ph03n1x
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
New

Sub Categories: