Rails cssbundling, TailwindCSS and Sass in production - ruby-on-rails

Question

Need
I need both Sass and TailwindCSS to work in parallel for our project (Rails 7 deployed on Heroku).
Current setup
# Procfile
release: rake db:migrate
web: bundle exec puma -C config/puma.rb
worker: bundle exec sidekiq -C config/sidekiq.yml
css: yarn build:css
sass: yarn build:sass
js: yarn build
// package.json
{
// ...
"scripts": {
"build": "...",
"build:css": "tailwindcss -i ./path/to/input.css -o ./path/to/output1.css",
"build:sass": "sass ./path/to/input.sass.scss:./path/to/output2.css"
}
}
<!-- application.html.erb -->
<%= stylesheet_link_tag 'tailwind', 'data-turbo-track': 'reload' %>
<%= stylesheet_link_tag 'application', 'data-turbo-track': 'reload' %>
Problem
Locally, everything works just fine. But when I try to push this to production, my Sass code disappears.
I found out in cssbundling gem's docs that it was due to:
When you deploy your application to production, the css:build task attaches to the assets:precompile task to ensure that all your package dependencies from package.json have been installed via yarn, and then runs yarn build:css to process your stylesheet entrypoint, as it would in development.
Solution(?)
So I changed for only one script calling the other ones:
// package.json
{
// ...
"scripts": {
"build": "...",
"build:css": "yarn build:sass & yarn build:tailwind",
"build:css-watch": "yarn build:sass --watch & yarn build:tailwind --watch"
"build:tailwind": "tailwindcss -i ./path/to/input.css -o ./path/to/output1.css",
"build:sass": "sass ./path/to/input.sass.scss:./path/to/output2.css"
}
}
Which now works in production, but for development environment, if I want to use the --watch option, the only solution I found is to create another script: build:css-watch.
Question(s)
Is my solution the best one for my problem?
If so, the build:css-watch script looks really weird to me, is there any other solution?