DEV Community

Cover image for Multiple Output files with cssbundling-rails and Tailwind
Nik Wakelin
Nik Wakelin

Posted on

Multiple Output files with cssbundling-rails and Tailwind

The default build:css for cssbundling-rails using Tailwind will take app/stylesheets/application.tailwind.css and output it to app/assets/builds/application.css ready for inclusion using the asset pipeline.

However, often you’ll want multiple entry points or output files - say, one for your application and one for your public site that’s a bit smaller.

You could change the command in package.json to use && and join two calls to the Tailwind CLI, but this approach has a couple of issues - cssbundling-rails is expecting to be able to append --watch to commands that are run in development so that rebuilds happen as you change files, AND use the command to prep your css once before running a deploy or integration test.

Enter npm-run-all, which will let you run commands with a glob-style syntax, in parallel, and passing through arguments. Just change the "scripts" section of your package.json to include tasks like this:

"scripts": {
  "build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
  "build:css:application": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
  "build:css:static": "tailwindcss -i ./app/assets/stylesheets/static-pages.tailwind.css -o ./app/assets/builds/static-pages.css"
}
Enter fullscreen mode Exit fullscreen mode

Now when you run yarn build:css you’ll end up with two output files in your build (in this case, "application.css" and "static-pages.css") and when you want to run it in watch mode, yarn build:css --watch will pass that argument down to each individual build and run them in parallel.

It’s the build:css command that's doing the magic:

"npm-run-all --parallel \"build:css:* {@}\" --"
Enter fullscreen mode Exit fullscreen mode

Essentially this is saying "run anything matching build:css:*, in parallel, and passing all arguments through from the original invocation" (that's the {@} syntax from npm-run-all)

Enjoy!

Discussion (0)