Rails and TailwindCSS have always had a tricky relationship over the past several years. While TailwindCSS has become the go to favourite of many frontend developers to quickly style web applications and websites, it relied on frontend technologies to compile these CSS assets.
Over the years, Ruby on Rails developers have had to rely on a variety of setup hacks to get frameworks like TailwindCSS to work. Luckily, there's an official Rails gem which was released in early 2021 to address this: https://github.com/rails/tailwindcss-rails/
The other day, we ran into a problem while working on a brand new Ruby on Rails 7 app. The gem is supposed to automatically detect changes in your templates (such as your erb and html files) via tailwind.config.js.
Unfortunately, Ruby on Rails was not picking up on these changes and adding TailwindCSS utility classes to elements did not seem to include those classes in the JIT-compiled CSS.
The issue is that in the development environment, Rails was reading from the bundled version of the assets. This was selected over the JIT-compiled asset, which is what we actually want.
To fix this, we set the following:
# ./config/environments/development.rb
config.assets.debug = true
Restart your server and this should fix the problem.
See: https://github.com/rails/tailwindcss-rails/issues/160#issuecomment-1085257215
Previous Blog Post: Fixing Foreign Key Violations in Rails Fixture Data