How to add custom CSS files using tailwindcss-rails?

[rozhok]

My project uses tailwindcss-rails, and I want to add a lightbox to the app. I found a stimulus wrapper for it at https://github.com/stimulus-components/stimulus-lightbox, 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?

[wilapdantop10]

Dear @rozhok, just add @import 'lightgallery/css/lightgallery'; in the application.css/scss. Maybe it will work. For the stimulus lightbox you can consider using esbuild.

[rozhok]

Importing to the applications.css does not work.

[wilapdantop10]

Font can be specified in tailwind.config.js at fontFamily.

module.exports = { fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, }

[rozhok]

Where should I place font files?

[wilapdantop10]

In the application.tailwind.css

if using webfont
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
for local font

@font-face {
  font-family: "ADELIA";
  src: url("../public/fonts/ADELIA.otf");
}