Phoenix / esbuild / Tailwind 2 configuration

config.exs

# Configure esbuild (the version is required)
config :esbuild,
  version: "0.12.26",
  default: [
    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

dev.exs

config :rocket, RocketWeb.Endpoint,
  http: [port: 4000],
  url: [scheme: "http", host: "localhost", port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]

endpoint.ex

  plug(
    Plug.Static,
    at: "/",
    from: :rocket,
    gzip: false,
    only: ~w(assets fonts images js favicon.ico robots.txt)
  )
  
  # Code reloading can be explicitly enabled under the
  # :code_reloader configuration of your endpoint.
  if code_reloading? do
    socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
    plug Phoenix.LiveReloader
    plug Phoenix.CodeReloader
  end

mix.exs

{:phoenix, "~> 1.6.0"},
{:phoenix_html, "~> 3.0.3", override: true},
{:phoenix_live_reload, "~> 1.3.3", only: [:dev, :test]},
{:phoenix_live_view, "~> 0.16.4"},
{:phoenix_live_dashboard, "~> 0.5.2"},
{:esbuild, "~> 0.3.2", runtime: Mix.env() == :dev}

  defp aliases do
    [
      "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],
      test: ["ecto.create --quiet", "ecto.migrate", "test"],
      "assets.deploy": [
        "cmd --cd assets npm run deploy",
        "esbuild default --minify",
        "phx.digest"
      ]
    ]
  end

package.json

{
    "scripts": {
        "deploy": "NODE_ENV=production tailwindcss --postcss --minify -i css/app.css -o ../priv/static/assets/app.css"
    },
    "dependencies": {
        "alpinejs": "^3.2.3",
        "topbar": "^1.0.1",
        "chart.js": "^3.4.1",
        "prismjs": "^1.25.0"
    },
    "devDependencies": {
        "autoprefixer": "^10.2.0",
        "postcss": "^8.3.5",
        "postcss-import": "^14.0.2",
        "tailwindcss": "^2.2.16"
    }
}

postcss.config.js

module.exports = {
    plugins: {
        'postcss-import': {},
        tailwindcss: {},
        autoprefixer: {},
    }
}

tailwind.config.js

module.exports = {
    mode: 'jit',
    purge: [
        "../**/*.md",
        "../**/*.html.md",
        "../**/*.html.*ex",
        "../**/views/**/*.ex",
        "../**/live/**/*.ex"
    ],
    theme: {},
    variants: {},
    plugins: []
}