How to include stylesheets from a gem in Rails 7.2

For such a small sass file you'll be better off just copy-pasting it, you'll want to customize the looks anyway.

dartsass-rails

This is the official rails 7 way of compiling sass files before sprockets picks it up as plain css.

bundle add dartsass-rails
bin/rails dartsass:install  

// app/assets/application.scss

@import "simple_calendar";

You have to run bin/dev or bin/rails dartsass:watch to compile application.scss to app/assets/builds/application.css which is then used by sprockets.

dartsass-sprockets

This is an unofficial replacement of the deprecated sassc-rails, which lets you use sprockets directives as normal for sass files:

bundle add dartsass-sprockets

/* app/assets/application.css */

/*
 *= require simple_calendar
 */

Tailwind

Last time I checked there is no easy way to import files from gems into tailwind, because it is not aware of any asset paths from sprockets. You can use relative and absolute paths:

/* app/assets/application.tailwind.css */

@import "/home/alex/.rbenv/versions/3.3.4/lib/ruby/gems/3.3.0/gems/simple_calendar-3.0.4/app/assets/stylesheets/simple_calendar.scss";

This could be made better with symlinks:

# config/initializers/gem_assets.rb

%w[simple_calendar].each do |name|
  system "mkdir -p app/assets/gems/#{name}"
  system "ln -snf `bundle show #{name}`/app/assets app/assets/gems/#{name}/assets"
end

# don't need this to be in asset paths again
Rails.application.config.after_initialize do
  Rails.configuration.assets.paths.delete Rails.root.join("app/assets/gems").to_s
end

which will symlink assets directory from simple_calendar:

app/
└─ assets/
   └─ gems/
      └─ simple_calendar/
         └─ assets/ -> /home/alex/.rbenv/versions/3.3.4/lib/ruby/gems/3.3.0/gems/simple_calendar-3.0.4/app/assets/
            └─ stylesheets/
               └─ simple_calendar.scss

which is way better than an absolute path with hardcoded versions:

/* app/assets/application.tailwind.css */

@import "../gems/simple_calendar/assets/stylesheets/simple_calendar.scss";