Phoenix framework - ESBuild - TailwindCSS

config.exs

config :esbuild,
  version: "0.12.18",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

config :tailwind,
  # TailwindCSS live watcher breaks on `~> 3.2.0`
  version: "3.1.8",
  default: [
    args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
    cd: Path.expand("../assets", __DIR__)
  ]

CONTRIBUTING.md

To install esbuild you can run:

mix esbuild.install

To test esbuild:

mix esbuild default

Perform TailwindCSS installation:

mix tailwind.install

dev.exs

import Config

# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with esbuild to bundle .js and .css sources.
config :my_project, MyProjectWeb.Endpoint,
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
  ]

mix.exs

defmodule MyProject.MixProject do
  defp deps do
    [
      {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
    ]
  end

  defp aliases do
    [
      # ...
      "assets.deploy": [
        "tailwind default --minify",
        "esbuild default --minify",
        "phx.digest"
      ]
    ]
  end
end

package.json

{
  "scripts": {
    "deploy": "NODE_ENV=production postcss css/app.css -o ../priv/static/assets/app.css && cd .. && mix assets.deploy && rm -f _build/esbuild"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.13",
    "postcss-cli": "^9.1.0",
    "postcss-import": "^14.1.0"
  },
  "dependencies": {
    "@alpinejs/mask": "^3.10.5",
    "alpinejs": "^3.10.5",
    "daisyui": "^2.38.0"
  }
}