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

2 1378 4

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

abtin
page 20: … protoc command… I had to additionally run the following go get commands in order to be able to compile protobuf code using go...
14 2929 7
New
jimschubert
In Chapter 3, the source for index introduces Config on page 31, followed by more code including tests; Config isn’t introduced until pag...
8 1310 3
New
telemachus
Python Testing With Pytest - Chapter 2, warnings for “unregistered custom marks” While running the smoke tests in Chapter 2, I get these...
5 2075 1
New
johnp
Hi Brian, Looks like the api for tinydb has changed a little. Noticed while working on chapter 7 that the .purge() call to the db throws...
4 1231 1
New
mikecargal
Title: Hands-On Rust (Chapter 11: prefab) Just played a couple of amulet-less games. With a bit of debugging, I believe that your can_p...
22 1619 20
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...
1 1215 1
New
JohnS
I can’t setup the Rails source code. This happens in a working directory containing multiple (postgres) Rails apps. With: ruby-3.0.0 s...
0 1272 3
New
jeremyhuiskamp
Title: Web Development with Clojure, Third Edition, vB17.0 (p9) The create table guestbook syntax suggested doesn’t seem to be accepted ...
0 1835 1
New
Henrai
Hi, I’m working on the Chapter 8 of the book. After I add add the point_offset, I’m still able to see acne: In the image above, I re...
1 1022 4
New
a.zampa
@mfazio23 I’m following the indications of the book and arriver ad chapter 10, but the app cannot be compiled due to an error in the Bas...
1 3360 6
New

Other popular topics Top

ohm
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
245 5335 101
New
axelson
I’ve been really enjoying obsidian.md: It is very snappy (even though it is based on Electron). I love that it is all local by defaul...
38 4062 19
New
AstonJ
Or looking forward to? :nerd_face:
480 9438 251
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...
243 5922 95
New
AstonJ
Thanks to @foxtrottwist’s and @Tomas’s posts in this thread: Poll: Which code editor do you use? I bought Onivim! :nerd_face: https://on...
88 5364 32
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...
4 4891 0
New
First poster: joeb
The File System Access API with Origin Private File System. WebKit supports new API that makes it possible for web apps to create, open,...
43 3103 21
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
16 4113 11
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
27 2843 9
New
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
40 2292 21
New

Latest in Agile Web Development with Rails 7

Agile Web Development with Rails 7 Portal

Sub Categories: