Okay. After some digging, researching, and experimenting I realize this is much simpler than I’ve made it above.
This is where I am now…
FIRST:
rails new my app --css tailwind
Unsurprisingly, this sets up almost everything we need.
However we need two things in order to optimize our UI development workflow a bit by eliminating the need for manually refreshing the browser.
The first step to this is to use the rails_live_reload gem by adding this line:
gem "rails_live_reload"
Into the app’s Gemfile like this:
group :development do
gem "rails_live_reload"
end
Then run bundle:
> bundle
Now, when you are running (rails s) whenever there is a change in an .erb or .css file the browser will automatically refresh with the changes.
This is super-nice.
But we need to solve one more problem. With Tailwind, when you add classes to some HTML in a view or template, that class might not be in the generated tailwind.css file (./app/assets/builds/tailwind.css).
How do we update this file?
Easily:
> rails tailwindcss:build
Now, how do we get this to run automatically when any view or template (or even app/assets/stylesheets/application.tailwind.css) has been changed?
This is the next problem for me to solve.
I assume this is a solved-problem but me—being a Rails newbie—I’m still researching.
Anyone have any suggestions here?
P.S. I realize I might be “hyper-optimizing” workflow here. But I kinda got used to this kind of thing working on some other frameworks in the past: Make a change and it immediately shows in the browser. It felt like a game changer to me by making the “cost of change” super-small.