Including custom CSS files from node_modules and CSS from gems

[rozhok]

So let's say I want to add a gem, such as https://github.com/excid3/simple_calendar/, to my project. In the readme, it instructs me to include the gem's CSS file in my application.css:

*= require simple_calendar

If I only use tailwindcss-rails, it doesn't produce any results. The application.css won't be processed by the assets pipeline, and I won't get the desired results.

The same applies to any JS plugins that come with CSS files. There is currently no way to instruct tailwindcss-rails to include or concatenate these files into the resulting CSS.

I understand that I'm not the only user facing this issue. However, the suggested solution mentioned, for example, here, involves copy-pasting the styles directly into the application.css, which is obviously not the correct way to handle this.

I've asked this question on the forum and in the discussions but have not received any answers.

We need a standardized way to handle external CSS files. I can imagine there are many projects that want to use not only Tailwind and similar frameworks but also a rich ecosystem of gems and plugins.

[mariochavez]

Hi,

Let me share my experience here. First, this gem only works with CSS files, not SASS. If you need to work with SASS and files that are part of node_modules you will have better results with CSS bundling https://github.com/rails/cssbundling-rails.

If you still want to include files from other gems or node_files and use this gem, then you might want to enable Sprockets or Propshaft, the only drawback is that you will have two different stylesheets, one with TailwindCSS and a second for third-party CSS.

A third option, I apologize for my self-promotion, is to create a rake tasks that can dynamically include additional CSS from gems and node_modules while using this gem. Please visit this post to learn how to do it. https://mariochavez.io/desarrollo/2023/08/23/working-with-rails-engines-importmap-tailwindcss/