How to Fix Tailwind CSS Not Loading in Development After Running rails assets:precompile in Ruby on Rails 7

October 7, 2024

#RubyOnRails,#Development,#RailsBestPractices,#Tailwind_CSS,#Rails_Assets_Precompile

In Ruby on Rails applications, especially those using Tailwind CSS for styling, it’s not uncommon to run into issues when CSS changes are not reflected in the development environment after running the rails assets:precompile command. This article provides a step-by-step guide to resolving these issues and ensuring that your Tailwind CSS classes work properly in your development environment.

Understanding the Issue

When developing a Ruby on Rails 7 application with Tailwind CSS, you might encounter a situation where Tailwind CSS stops loading or doesn't reflect any changes you make to your classes. This issue often arises after running rails assets:precompile, which is intended for production, not development. Precompiled assets may interfere with the development asset pipeline, causing the CSS to not load or be outdated.

Step-by-Step Guide to Fixing the Issue

1. Clear Precompiled Assets in Development

After running rails assets:precompile, your development environment might start using the precompiled assets, which is not desirable. To fix this, run the following command to clear those precompiled assets:

rails assets:clobber

This will remove all precompiled assets and allow your development environment to revert to dynamically compiling assets as needed.

2. Ensure Proper Development Environment Configuration

Your config/environments/development.rb file controls how assets are managed in development mode. Make sure it has the following settings:

config.assets.debug = true
config.assets.compile = true
config.assets.digest = false
  • config.assets.debug = true: Ensures that assets are not concatenated and minified for easier debugging.
  • config.assets.compile = true: Allows assets to be compiled dynamically in development mode.
  • config.assets.digest = false: Prevents the use of hashed filenames for assets in development, which simplifies debugging.

3. Restart Your Rails Server

After clearing precompiled assets and verifying your development configuration, restart your Rails server to ensure that the changes take effect.

rails s

This step ensures that your Rails application reinitializes with the correct asset configuration.

4. Check Your Tailwind CSS Configuration

It’s also important to ensure that your tailwind.config.js file is correctly configured for development. Specifically, verify that the content section (previously known as purge) includes all necessary file paths so that Tailwind doesn't mistakenly remove styles that are still in use.

Here’s an example configuration:

module.exports = {
  content: [
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.erb',
    // Add more directories if necessary
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Make sure the content field covers all the paths where you use Tailwind classes, such as your .erb views and .js files.

5. Use bin/dev for Asset Watching

If you're using ESBuild in your Rails 7 application, ensure you're starting the Rails server with the bin/dev command. This command runs both the Rails server and a watcher for your JavaScript and CSS files, ensuring Tailwind and other assets are recompiled as you make changes.

bin/dev

Running bin/dev helps ensure that your Tailwind CSS classes are correctly compiled and reflected in your development environment.

Conclusion

Running rails assets:precompile is useful for production environments but can cause CSS issues in development. By clearing precompiled assets, verifying your development environment settings, checking your Tailwind configuration, and using the correct server startup commands, you can resolve Tailwind CSS loading issues and maintain a smooth development workflow.

By following these steps, your Ruby on Rails 7 application will properly load and apply Tailwind CSS classes, ensuring a consistent development experience.

Key Takeaways

  • Clear precompiled assets: Running rails assets:clobber helps remove precompiled assets that may interfere with development.
  • Check development configuration: Ensure config.assets.debug and config.assets.compile are correctly set in development.rb.
  • Use bin/dev: If you’re using ESBuild, always start the server with bin/dev to ensure assets are watched and recompiled in real-time.
  • Double-check Tailwind configuration: Make sure the content field in tailwind.config.js includes all necessary file paths to prevent purging of active styles.

This guide helps you avoid common pitfalls with Tailwind CSS in a Rails development environment, ensuring your styling changes are reflected instantly.

Looking for more tips on optimizing your Rails development workflow? Check out our related articles on Ruby on Rails and Tailwind CSS.

← Back to Blog
Follow Me