How to add custom CSS files using tailwindcss-rails?

My project uses tailwindcss-rails, and I want to add a lightbox to the app. I found a stimulus wrapper for it at GitHub - stimulus-components/stimulus-lightbox: A Stimulus controller to add a lightbox on images., and I can add its JS files using importmap, which works fine.

However, I’m struggling to understand how to add the plugin’s CSS files. I added @import 'lightgallery/css/lightgallery'; at the top of the application.tailwind.css file, and it added the lightbox styles. However, I encountered problems with fonts because they were referenced as relative files inside the CSS, and they weren’t processed.

What is the correct way to handle situations like this?

1 Like