Running SASS and Tailwind side by side in Rails

Running SASS and Tailwind side by side in Rails can be a challenge, but with the cssbundling-rails gem, it becomes much easier. This gem supports multiple CSS frameworks, including Bulma, plain SASS, Tailwind, PostCSS, and Bootstrap. By using the gem, developers can incrementally switch between frameworks or even use multiple frameworks simultaneously.

To get started, simply add the cssbundling-rails gem to your Rails project and install the framework you want to use. For example, if you want to use Bulma, you would install the Bulma package and add a build:css entry in your package.json file.

The cssbundling-rails gem also takes care of auto-reloading in development by adding an entry to Procfile.dev. This ensures that your assets are rebuilt whenever there are new changes.

If you want to use two frameworks side by side, you can include both in the build:css task. Make sure to keep both build commands and update the output names for the final CSS files to avoid conflicts. Additionally, you will need to require both CSS files in your layout.

Finally, update the Procfile.dev to run both framework tasks separately with Foreman.

In conclusion, the cssbundling-rails gem provides a flexible solution for running multiple CSS frameworks in Rails. It simplifies the process of switching between frameworks and allows developers to use different frameworks simultaneously. With this gem, developers can easily keep up with the latest trends in CSS frameworks and create dynamic and visually appealing web applications.