Phoenix won't compile Tailwindcss

Hello,
I’m following this tutorial to setup tailwindcss with Phoenix. However when I run mix phx.server I keep getting this strange error:

[error] Task #PID<0.543.0> started from PetalSkeletonWeb.Endpoint terminating
** (stop) :eacces
    erlang.erl:4412: :erlang.open_port({:spawn_executable, 'c:/Program Files/nodejs/npx.cmd'}, [{:cd, "d:/Code/Elixir/petal_skeleton/assets"}, :stderr_to_stdout, :use_stdio, :exit_status, :binary, :hide, {:args, ["tailwindcss", "--input=css/app.css", "--output=../priv/static/assets/app.css", "--postcss", "--watch"]}])
    (elixir 1.12.3) lib/system.ex:1052: System.do_cmd/3
    (phoenix 1.6.2) lib/phoenix/endpoint/watcher.ex:36: Phoenix.Endpoint.Watcher.watch/2
    (elixir 1.12.3) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
    (stdlib 3.15) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Function: &Phoenix.Endpoint.Watcher.watch/2
    Args: ["npx", ["tailwindcss", "--input=css/app.css", "--output=../priv/static/assets/app.css", "--postcss", "--watch", {:cd, "d:/Code/Elixir/petal_skeleton/assets"}]]
[error] Task #PID<0.545.0> started from PetalSkeletonWeb.Endpoint terminating

Full log here ```mix phx.server log
I’ve trying to reinstall Elixir and node multiple times but nothing worked.

This other files might be helpful
dev.exs
mix.exs
package.json
postcss.config.js
tailwind.config.js
app.css

why do you have the npx watcher twice?

watchers: [
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ],
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]

It’s just a copy-paste issue. I have only one watcher for npx

  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]

I don’t know exactly why but by renaming C:\Program Files\nodejs\npm.cmd to C:\Program Files\nodejs\npm.bat and C:\Program Files\nodejs\npx.cmd to C:\Program Files\nodejs\npx.bat the problem is solved.
I guess it’s some weird node permissions issue on windows.

If you are not forced to use windows on your dev-machine you should consider giving Linux or at least Mac a try.

1 Like