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

iPaul
page 37 ANTLRInputStream input = new ANTLRInputStream(is); as of ANTLR 4 .8 should be: CharStream stream = CharStreams.fromStream(i...
New
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
mikecargal
Title: Hands-On Rust (Chap 8 (Adding a Heads Up Display) It looks like ​.with_simple_console_no_bg​(SCREEN_WIDTH*2, SCREEN_HEIGHT*2...
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
curtosis
Running mix deps.get in the sensor_hub directory fails with the following error: ** (Mix) No SSH public keys found in ~/.ssh. An ssh aut...
New
jskubick
I found an issue in Chapter 7 regarding android:backgroundTint vs app:backgroundTint. How to replicate: load chapter-7 from zipfile i...
New
kolossal
Hi, I need some help, I’m new to rust and was learning through your book. but I got stuck at the last stage of distribution. Whenever I t...
New
tkhobbes
After some hassle, I was able to finally run bin/setup, now I have started the rails server but I get this error message right when I vis...
New
New
davetron5000
Hello faithful readers! If you have tried to follow along in the book, you are asked to start up the dev environment via dx/build and ar...
New

Other popular topics Top

New
PragmaticBookshelf
Ruby, Io, Prolog, Scala, Erlang, Clojure, Haskell. With Seven Languages in Seven Weeks, by Bruce A. Tate, you’ll go beyond the syntax—and...
New
siddhant3030
I’m thinking of buying a monitor that I can rotate to use as a vertical monitor? Also, I want to know if someone is using it for program...
New
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
PragmaticBookshelf
Leverage Elixir and the Nx ecosystem to build intelligent applications that solve real-world problems in computer vision, natural languag...
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
mindriot
Ok, well here are some thoughts and opinions on some of the ergonomic keyboards I have, I guess like mini review of each that I use enoug...
New
PragmaticBookshelf
Quickly turn complex problems into simple, working solutions using functional programming, safe concurrency, and the expressive tools of ...
New

Latest in Agile Web Development with Rails 7

Agile Web Development with Rails 7 Portal

Sub Categories: