How toRun Tailwind and Remix in Parallel with PM2

If you use Remix together Tailwind (and you should!), you may have found out that you need to run the Tailwind CLI (or PostCSS CLI) and the Remix CLI at the same time. This is because Remix doesn't run PostCSS or Tailwind automatically internally.

If you are like me and don't want to always remember to run two, or more, separete scripts, you can use PM2 to run them in parallel.

Let's first install pm2

npm i pm2

Then, create a config file, I like to put it in config/pm2.config.js so it's not at the root of the app.

There put this content:

module.exports = {
  apps: [
    {
      name: "TailwindCSS",
      script: "npm run dev:css",
      ignore_watch: ["."],
      env: { NODE_ENV: "development" },
    },
    {
      name: "Remix",
      script: "npm run dev:app",
      ignore_watch: ["."],
      env: { NODE_ENV: "development" },
    },
  ],
};

If you have a Express server and you need to run the server and remix watch use this one:

module.exports = {
  apps: [
    {
      name: "TailwindCSS",
      script: "npm run dev:css",
      ignore_watch: ["."],
      env: { NODE_ENV: "development" },
    },
    {
      name: "Remix",
      script: "npm run dev:remix",
      watch: ["./remix.config.js"],
      env: { NODE_ENV: "development" },
    },
    {
      name: "Server",
      script: "npm run dev:server",
      watch: ["./server/index.js"],
      env: { NODE_ENV: "development" },
    },
  ],
};

Finally, in your package.json add the following scripts:

{
  "scripts": {
    "dev:css": "tailwindcss --output ./app/styles/tailwind.css --watch",
    "dev:app": "remix dev",
    "dev": "pm2-dev config/pm2.config.js"
  }
}

Or if you used Express add this scripts:

{
  "scripts": {
    "dev:css": "tailwindcss --output ./app/styles/tailwind.css --watch",
    "dev:remix": "remix watch",
    "dev:server": "NODE_ENV=development node server/index.js",
    "dev": "pm2-dev config/pm2.config.js"
  }
}

And that's all, now run npm run dev or yarn dev and it will run PM2 which will run the other scripts at the same time so you have one script to run them all.