V4: Inject data into the configuration for @source path.

[henrikbjorn]

In Rails often Rubygems will provide some controllers and views etc. These will often be installed in /bundle or some other non-local path.

These can be added via @source /bundle/something but I would like to make this more dynamic.

Is it possible to inject something into the .css config so it can be @source "${bundlePath}/something"; ? Or it it possible to add custom aliases ?

[wongjn]

You can write file globs, but no aliases or variables.

[wongjn]

So you can still use file globs here, something like:

@source "bundle/ruby/*/gems/**/*"

[henrikbjorn]

So you can still use file globs here, something like:

@source "bundle/ruby/*/gems/**/*"

I don't want to source have Tailwind scanning every single gem possible.

The same problem arises with '@import'. Let's say a gem includes additions to the utilities or base layer. Then I have to specify the complete for that e.g. @import "/bundle/ruby/3.4.0/gems/activeadmin-4.0.0.beta15/tailwind.css" (or whatever the file may be called).

[henrikbjorn]

and again the path might be different, depending on what hardware you are on e.g Windows vs Mac vs Linux so it isn't always "/bundle/" something.

As nvm is popular, in ruby we have rvm. Which also changes the path.

[wongjn]

Ah ok, you could perhaps do:

@source "bundle/ruby/*/gems/activeadmin-*";

Or perhaps for other OSes or package managers:

@source "*/ruby/*/gems/activeadmin-*";

[henrikbjorn]

Your examples assume that bundle or whatever directly scoped locally for the project they are not. See the explicit / in my examples.

@source "/*/ruby/*/gems/

Would scan the complete harddrive

And that might not even match rvm usecases.

[waywho]

I am also encountering the same issue/needs.

[wesleydebruijn]

I've stumbled across this particular issue where I want to include a @source and @import for my Tailwind components that reside in a Rails Engine. For this to work I created the following rake task that hooks into the tailwindcss build & watch.

1. my_engine:install to create a my_engine.css and add it to the .gitignore since the references to the gem differ on machine builds
2. my_engine:build runs on every build/watch to update the references in my_engine.css to the machines location of the gem

namespace :my_engine do
  desc "Create Tailwind CSS file for MyEngine"
  task install: :environment do |_, args|
    system("echo '\n/**/my_engine.css' >> #{Rails.root}/.gitignore")
    system("echo '\n@import \"./my_engine.css\";' >> #{Rails.root}/app/assets/tailwind/application.css")
  end

  desc "Build Tailwind CSS file reference for MyEngine"
  task build: :environment do |_, args|
    system("echo '@source \"#{MyEngine::Engine.root}\";\n@import \"#{MyEngine::Engine.root}/app/assets/tailwind/random.css\";' > #{Rails.root}/app/assets/tailwind/my_engine.css")
  end
  
  Rake::Task["tailwindcss:watch"].enhance([ "my_engine:build" ]) if Rake::Task.task_defined?("tailwindcss:watch")
  Rake::Task["tailwindcss:build"].enhance([ "my_engine:build" ]) if Rake::Task.task_defined?("tailwindcss:build")
  Rake::Task["assets:precompile"].enhance([ "my_engine:build" ])
end

[jsagl]

[henrikbjorn]

I fail to see how that makes 3rd party rubygems paths available to tailwind as @source "3rd_partygem/**"

Since tailwind are running in a node process without knowledge of propshaft and the rails environment.

[jsagl]

I was too happy to have found the solution to my problem, but failed to realize I still had another line of code with the full path 😞 Sorry for the noise

[flyon]

Im also wondering if this can be done with a plugin. Is it possible to use tailwind.config.js for this usecase and add a plugin that dynamically adds sources?

[wongjn]

I don't think you can use JavaScript plugins for this. Thinking about this you could try:

• If you are using PostCSS/Vite, you could have a PostCSS/Vite plugin that runs before Tailwind that injects a @source directive into the input CSS.
• Have some sort of command that creates a CSS file that contains the @source directive, and then @import this CSS file from within the input CSS file.