Phoenix won't compile Tailwindcss

Phoenix Forum Questions / Help
, ,
1

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

2

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__)
    ]
3

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__)
    ]
4

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.

2 Likes
5

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