Rails cssbundling, TailwindCSS and Sass in production

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?