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

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
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
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
nicoatridge
Hi, I have just acquired Michael Fazio’s “Kotlin and Android Development” to learn about game programming for Android. I have a game in p...
New
adamwoolhether
I’m not quite sure what’s going on here, but I’m unable to have to containers successfully complete the Readiness/Liveness checks. I’m im...
New
brunogirin
When running tox for the first time, I got the following error: ERROR: InterpreterNotFound: python3.10 I realised that I was running ...
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
Keton
When running the program in chapter 8, “Implementing Combat”, the printout Health before attack was never printed so I assumed something ...
New
roadbike
From page 13: On Python 3.7, you can install the libraries with pip by running these commands inside a Python venv using Visual Studio ...
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
PragmaticBookshelf
Write Elixir tests that you can be proud of. Dive into Elixir’s test philosophy and gain mastery over the terminology and concepts that u...
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
New
AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
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
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
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
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
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

Latest in Agile Web Development with Rails 7

Agile Web Development with Rails 7 Portal

Sub Categories: