s2k

s2k

Author of Fast Feedback Using Ruby

Agile Web Development with Rails 7: Reloading assets in development mode

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 this:

<header class="bg-green-600">

and, yes, the header part is indeed green.

But when I change it to, for example

<header class="bg-sky-600">

and reload the page, the background is white. Why is that?
I assumed the examples from the Tailwind docs at https://tailwindcss.com/docs/background-color, can be used elsewhere (read: my local app).
And while that’s true from some of the named colours, it is not for others.
‘bg-blue-700’ yields a strong blue, ‘bg-orange-500’ & ‘bg-fuchsia-600’ is white. A ‘one-off’ colour is also displayed white (or ignored?).

After running

bin/rails assets precompile

these colours are displayed in the browser.
What causes this behaviour? Can it be changed, to get all the colours Tailwind has in store (e.g. also the ‘one-off’ colours such as class="bg-[#50d71e]" (also from the Tailwind docs)?

Cheers
Stephan

Marked As Solved

s2k

s2k

Author of Fast Feedback Using Ruby

Aha, now I see were I went wrong: While, I usually default to using Foreman, I used bin/rails server, which doesn’t watch for Tailwind related changes, while the Procfile.dev does.

It’s nice that bin/dev even installs foreman if it isn’t already there.

Also Liked

rubys

rubys

Author of Agile Web Development With Rails

Short answer: stop your server, run rails assets:clobber, and restart your server.

I guess the question I have to ask: why did you run bin/rails assets:precompile? What that does is to create a static snapshot of your tailwind classes and put the results into your public/assets directory. If that directory exists when the server is started, puma will serve those files and never forward the request to rails at all. The end result is any tailwind classes you try to make use of will be ignored unless they are in that static snapshot.

rubys

rubys

Author of Agile Web Development With Rails

What I did to reproduce the problem:

rails new play --css tailwind
cd play
rails generate scaffold say hello
bin/dev

Adding bg-green-600 to app/views/say/hello.html.erb worked at this point.

Stopping the server, running rails assets:precompile, restarting the server, and then changing the color to bg-sky-600 did not work - the background was white – this matched what you reported.

Stopping the server, running rails assets:clobber, and restarting the server, and I can see the new color. I can then change the color to bg-red-600 and see the results of my change.

Where Next?

Popular Pragmatic Bookshelf topics Top

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
Mmm
Hi, build fails on: bracket-lib = “~0.8.1” when running on Mac Mini M1 Rust version 1.5.0: Compiling winit v0.22.2 error[E0308]: mi...
New
jeremyhuiskamp
Title: Web Development with Clojure, Third Edition, vB17.0 (p9) The create table guestbook syntax suggested doesn’t seem to be accepted ...
New
fynn
This is as much a suggestion as a question, as a note for others. Locally the SGP30 wasn’t available, so I ordered a SGP40. On page 53, ...
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
New
andreheijstek
After running /bin/setup, the first error was: The foreman' command exists in these Ruby versions: That was easy to fix: gem install fore...
New
New
ggerico
I got this error when executing the plot files on macOS Ventura 13.0.1 with Python 3.10.8 and matplotlib 3.6.1: programming_ML/code/03_...
New
bjnord
Hello @herbert ! Trying to get the very first “Hello, Bracket Terminal!" example to run (p. 53). I develop on an Amazon EC2 instance runn...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1063 24245 395
New
AstonJ
Or looking forward to? :nerd_face:
503 15149 280
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
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
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 29994 760
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
NewsBot
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New
PragmaticBookshelf
Fight complexity and reclaim the original spirit of agility by learning to simplify how you develop software. The result: a more humane a...
New

Latest in Agile Web Development with Rails 7

Agile Web Development with Rails 7 Portal ❯

Sub Categories: