esbuild + postcss-cli in phoenix

endpoint.ex

import Config

# Configure your database
config :my_app, MyApp.Repo, show_sensitive_data_on_connection_error: true

# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with webpack to recompile .js and .css sources.
config :my_app, MyAppWeb.Endpoint,
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    yarn: ["js", "--watch", cd: Path.expand("../assets", __DIR__)],
    yarn: ["css", "--watch", cd: Path.expand("../assets", __DIR__)],
    yarn: ["copy", "--watch", cd: Path.expand("../assets", __DIR__)]
  ]

# Watch static and templates for browser reloading.
config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(css|png|jpeg|jpg|gif|svg)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/my_app_web/(live|views)/.*(ex|exs)$",
      ~r"lib/my_app_web/(templates|components)/.*(ex|exs)$"
    ]
  ]

# Do not include metadata nor timestamps in development logs
config :logger, :console, format: "[$level] $message\n"

# Set a higher stacktrace during development. Avoid configuring such
# in production as building large stacktraces may be expensive.
config :phoenix, :stacktrace_depth, 20

# Initialize plugs at runtime for faster development compilation
config :phoenix, :plug_init_mode, :runtime

package.json

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "esbuild ./js/app.js --target=es2015 --bundle --outdir=../priv/static/js --minify",
    "js": "esbuild ./js/app.js --target=es2015 --bundle --outdir=../priv/static/js --sourcemap",
    "css": "postcss ./css/app.css --dir ../priv/static/css",
    "copy": "cpx \"static/**/*\" ../priv/static"
  },
  "dependencies": {
    "alpinejs": "^2.4.1",
    "nprogress": "^0.2.0",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "autoprefixer": "^10.1.0",
    "cpx": "^1.5.0",
    "esbuild": "^0.8.48",
    "postcss": "^8.2.2",
    "postcss-cli": "^8.3.1",
    "postcss-import": "^12.0.1",
    "prettier": "^2.0.5",
    "tailwindcss": "^2.0.2"
  }
}

Note: I also found some random copy-files-dir-watcher (cpx) thing because another thing webpack was doing was copying images and whatnot as well.

There is a postcss plugin for esbuild, but it doesn't actually work (IME) and when I forked and got it to work, it was extremely slow for whatever reason.