Missing Styles from Tailwind CSS in ViewComponent?

This is a quick-tip when you added ViewComponent to your Rails app (either by yourself or through Rails Designer), but the CSS is not loading properly. What’s up with that?

Tailwind CSS uses a mechanism to check which classes needs to be added to your stylesheet. This is on an opt-in basis, meaning you need to manually add the paths to all ERB partials, views, ViewComponents and Stimulus controllers.

So if your ViewComponent are not styled as expected, the path to your ViewComponent’s are probably missing. You can add the paths to your ViewComponent in the tailwind.config.js file located in the root folder.

module.exports = {
  content: [
    "./app/views/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/assets/stylesheets/**/*.css",
    "./app/javascript/controllers/**/*.js",
    "./app/components/**/*.{html.erb,rb}"
  ],

  // …
}

Notice the last line ("./app/components/**/*.{html.erb,rb}"). This tells Tailwind CSS to check all files in the app/components folder with the html.erb and the rb extensions (typical for ViewComponent). If your ViewComponents live in another folder, say app/views/components/, you need to change the path accordingly.

Depending on your Tailwind CSS set up, the update to the config will start a scan off the files, making sure the Tailwind CSS classes are correctly identified and added to your stylesheet.

Typically Rails apps using Tailwind CSS have a bin/dev binstub that will run both the Tailwind CSS executable/JavaScript build process and the rails server. Check that you run that and not just rails server.

Want to read more about the Content Configuration in Tailwind CSS? Check out the Tailwind CSS docs.