I’m trying to get my app/environment wired up to achieve the following:
- App with Tailwind CSS
- Hot reloading in the browser for UI changes
- Tailwind-related changes also trigger the hot reload
Why? Well, obviously, to optimize UI development workflow (i.e., no manually reloading browser pages)
Here’s what I’ve figured out by stitching together multiple articles:
FIRST (source: Install Tailwind CSS with Ruby on Rails - Tailwind CSS)
rails new myapp --css tailwind
NEXT:
Enable browser hot code reloading with GitHub - railsjazz/rails_live_reload: Live Reload for your Rails app. The easiest way to increase your productivity. :
Edit Gemfile, adding:
group :development do
gem "rails_live_reload"
end
> bundle
FINALLY (source: How to Setup Tailwind 3 on Rails 7 - DEV Community 👩💻👨💻):
cd myapp
npm install -D tailwindcss
npx tailwindcss init
UPDATE: These next steps may not be required since it looks like the base tailwind setup already has the following:
- config/tailwind.config.js
- app/assets/stylesheets/application.tailwind.css and <%= stylesheet_link_tag “tailwind”, “inter-font”, “data-turbo-track”: “reload” %> in application.html.erb.
But this leaves:
npx tailwindcss -i app/assets/stylesheets/application.css -o app/assets/stylesheets/wind.css --watch
Which maybe needs to be something like:
npx tailwindcss -i app/assets/stylesheets/application.css -o app/assets/build/tailwind.css --watch
(???) Edit generated tailwind.config.js:
module.exports = {
content: ["./app/**/*.{html,js,erb}"],
theme: {
extend: {},
},
plugins: [],
}
(???) Edit app/assets/stylesheets/application.css, adding:
@tailwind base;
@tailwind components;
@tailwind utilities;
(???) Edit application.html.erb, adding:
<%= stylesheet_link_tag 'wind', media: 'all', 'data-turbolinks-track': 'reload' %>
In a separate shell:
npx tailwindcss -i app/assets/stylesheets/application.css -o app/assets/stylesheets/wind.css --watch
Now it appears that simple changes to the .erb file (AND tailwind class changes) are automatically reflected in the browser without manually reloading.
The big questions I have:
- Am I over-complicating/over-thinking this? Is there a simpler way?
- Am I missing anything critical?