TailwindCSS 4 and using resources from Gems

[mariochavez]

I am not sure if I'm missing something here, but I could not find a way to reference CSS from a Gem or to tell TailwindCSS to inspect views or helpers from a Gem too.

Currently, I'm using v4, and I want to be able to do something like this:

@import "<%= MyGem::Engine.root.join('app', 'assets', 'stylesheets', 'maquina_components.css') %>";

@source "<%= MyGem::Engine.root.join('app', 'views') %>";
@source "<%= MyGem::Engine.root.join('app', 'helpers') %>";

This is not possible currently, but my simple solution was to create a custom watch rake task that can evaluate the application.tailwind.css file as an ERB file to resolve the Gem paths just before it is processed by Tailwind's CLI. Note: Also, the build task needs to be modified.

namespace :tailwindcss do
  desc "Watch and build your Tailwind CSS on file changes"
  task watch_custom: :environment do |_, args|
    debug = args.extras.include?("debug")
    poll = args.extras.include?("poll")
    always = args.extras.include?("always")

    # Maybe this path needs to be extracted from Tailwindcss::Commands?
    template_file = Rails.root.join("app", "assets", "stylesheets", "application.tailwind.css")
    erb_template = ERB.new(File.read(template_file))

    output = erb_template.result(binding)

    # This path maybe in the same situation as previous one.
    output_path = Rails.root.join("app", "assets", "stylesheets", "tailwind_output_#{Time.current.to_i}.css")
    File.write(output_path, output)
    puts output_path if args.extras.include?("verbose")

    command = Tailwindcss::Commands.watch_command(always: always, debug: debug, poll: poll)
    command[2] = output_path.to_s

    puts command.inspect if args.extras.include?("verbose")
    system(*command)

    at_exit { File.delete(output_path) if File.exist?(output_path) }
  rescue Interrupt
    at_exit { File.delete(output_path) if File.exist?(output_path) }
    puts "Received interrupt, exiting tailwindcss:watch" if args.extras.include?("verbose")
  end
end

I'm not sure if this is the way to go, but this is the first solution that worked for me right now.

[flavorjones]

Thanks for asking this question. Please see the ongoing conversation at #355 which I think encompasses the issue you're describing above.

If I've misunderstood, please reply here and I'm happy to reopen this discussion!