Another installment of a #NoteToSelf.
To illustrate the topic of a workshop I’m preparing, I wrote a small Rails (7.1.1) app that uses Tailwind CSS.
While preparing the application, I wanted to tailor the CSS of buttons, tables, etc. and wondered why the layout didn’t change when I edited the CSS classes of HTML elements. While the information about the formatting was present in the HTML displayed, it did not affect how the page looked.
As an example, take this HTML snippet:
<h1 class="font-bold text-4xl text-green-800">New submitter</h1>
I expected the h1 tag to be displayed in a light font weight. After changing the tag to
<h1 class="font-bold text-4xl text-red-800">New submitter</h1>
I expected the text to be red, and it wasn’t.
It took some searching to figure out that in config/environments/development.rb, I had to add a set config.assets.debug to true:
config.assets.debug = true
After adding this line and restarting the Rails server, changes to the layout were displayed immediately. Yay! 😃
Details about this setting are documented at https://guides.rubyonrails.org/asset_pipeline.html#turning-source-maps-on.
