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.

Tailwind CSS, since v4, automatically scans every file in your project unless it is added in your .gitignore or a CSS file.

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.

@source "./../app/components/";

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.