Setup:
rails new fake_app -d postgresql -c tailwind
Configuration:
- followed all instructions verbatim at tailwind docs
Additional gems:
bundle add view_component
Created a new component:
rails g component header
Updated tailwind.config.ts
as follows:
content: [
'./app/components/**/*.{rb,html,erb}',
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
Edited Procfile.dev as follows:
web: bundle exec rdbg --open -n -c -- bundle exec rails s -p 3000
css: bundle exec rails tailwindcss:watch[poll]
# have run this with and without the "[poll]" command
spinning up server as follows:
bin/dev
Problem:
When I make changes to the component template (in app/components/#{whatever}.html.erb
) there is no HMR.
other fixes I've attempted
rails_live_reload
gemguard-livereload
paired withrack-livereload
(including required configuration listed on both of their READMEs)rails assets:clobber
andrails tailwindcss:clobber
- ineffective- solutions in these following SO similar questions: one two
- Solutions attempted from GH: one
misc.
the views trigger the HMR just fine; But nothing, and I mean nothing, works with these view components.
random thing
while following this github thread I came across the comment here and attempted to run rails tailwindcss:build
and go this error:
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
But that lead me down a rabbit hole of attempting to correct the caniuse-lite
issue, which is almost a deeper rabbit hole
Unambiguous question:
How can I use HMR via tailwind in Rails 7 when editing my tailwind components located in app/components/
?