Tailwind not generating app.css

Hi, I’m new to Elixir and Phoenix, I just installed the framework following docs instructions Installation — Phoenix v1.7.7 (hexdocs.pm) Directory structure — Phoenix v1.7.7 (hexdocs.pm), but when I run the mix phx.server command, my wellcome to Phoenix page looks like a mess, Tailwind classes have no style, so I checked the console and I’m getting this:

$ mix phx.server
[info] Running HelloWeb.Endpoint with cowboy 2.10.0 at 127.0.0.1:4000 (http)
[info] Access HelloWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
[info] GET /
[debug] Processing with HelloWeb.PageController.home/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 344ms
[info] GET /assets/app.css
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (HelloWeb.Router)
    (hello 0.1.0) deps/phoenix/lib/phoenix/router.ex:487: HelloWeb.Router.call/2
    (hello 0.1.0) lib/hello_web/endpoint.ex:1: HelloWeb.Endpoint.plug_builder_call/2
    (hello 0.1.0) deps/plug/lib/plug/debugger.ex:136: HelloWeb.Endpoint."call (overridable 3)"/2
    (hello 0.1.0) lib/hello_web/endpoint.ex:1: HelloWeb.Endpoint.call/2
    (phoenix 1.7.7) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
    (plug_cowboy 2.6.1) lib/plug/cowboy/handler.ex:11: Plug.Cowboy.Handler.init/2
    (cowboy 2.10.0) /mnt/c/Users/dorti/projects/hello/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.10.0) /mnt/c/Users/dorti/projects/hello/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.10.0) /mnt/c/Users/dorti/projects/hello/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
    (stdlib 5.0) proc_lib.erl:241: :proc_lib.init_p_do_apply/3

So I realized that the framework is not generating app.css under the priv/static/assets path, it only generates app.js file. Any ideas?

Welcome to the forum! :slight_smile:

Did you try with mix tailwind.install --if-missing ?

Don’t forget to run commands shown in terminal after you create new project with mix phx.new

1 Like

Thanks.

Still the same

$ mix tailwind.install --if-missing

11:49:59.970 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.2/tailwindcss-linux-x64
$ mix phx.server
Generated hello app
[info] Running HelloWeb.Endpoint with cowboy 2.10.0 at 127.0.0.1:4000 (http)
[info] Access HelloWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...
[info] GET /
[debug] Processing with HelloWeb.PageController.home/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 315ms
[info] GET /assets/app.css
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (HelloWeb.Router)
    (hello 0.1.0) deps/phoenix/lib/phoenix/router.ex:487: HelloWeb.Router.call/2
    (hello 0.1.0) lib/hello_web/endpoint.ex:1: HelloWeb.Endpoint.plug_builder_call/2
    (hello 0.1.0) deps/plug/lib/plug/debugger.ex:136: HelloWeb.Endpoint."call (overridable 3)"/2
    (hello 0.1.0) lib/hello_web/endpoint.ex:1: HelloWeb.Endpoint.call/2
    (phoenix 1.7.7) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
    (plug_cowboy 2.6.1) lib/plug/cowboy/handler.ex:11: Plug.Cowboy.Handler.init/2
    (cowboy 2.10.0) /mnt/c/Users/dorti/projects/hello/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.10.0) /mnt/c/Users/dorti/projects/hello/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.10.0) /mnt/c/Users/dorti/projects/hello/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
    (stdlib 5.0) proc_lib.erl:241: :proc_lib.init_p_do_apply/3

What command did you run when creating a project?
I just tried to recreate issue with mix phx.new hello and it works as expected.

Exactly the same command mix phx.new hello

Try running mix setup
Also did you change any code?

Only config/dev.exs to setup the Postgresql connection

$ mix setup
Resolving Hex dependencies...
Resolution completed in 0.426s
Unchanged:
  castore 1.0.3
  cowboy 2.10.0
  cowboy_telemetry 0.4.0
  cowlib 2.12.1
  db_connection 2.5.0
  decimal 2.1.1
  ecto 3.10.3
  ecto_sql 3.10.1
  esbuild 0.7.1
  expo 0.4.1
  file_system 0.2.10
  finch 0.16.0
  floki 0.34.3
  gettext 0.22.3
  hpax 0.1.2
  jason 1.4.1
  mime 2.0.5
  mint 1.5.1
  nimble_options 1.0.2
  nimble_pool 1.0.0
  phoenix 1.7.7
  phoenix_ecto 4.4.2
  phoenix_html 3.3.1
  phoenix_live_dashboard 0.8.0
  phoenix_live_reload 1.4.1
  phoenix_live_view 0.19.4
  phoenix_pubsub 2.1.3
  phoenix_template 1.0.2
  plug 1.14.2
  plug_cowboy 2.6.1
  plug_crypto 1.2.5
  postgrex 0.17.2
  ranch 1.8.0
  swoosh 1.11.3
  tailwind 0.2.1
  telemetry 1.2.1
  telemetry_metrics 0.6.1
  telemetry_poller 1.0.0
  websock 0.5.2
  websock_adapter 0.5.3
All dependencies are up to date
The database for Hello.Repo has already been created

12:04:58.215 [info] Migrations already up
[debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.2/tailwindcss-linux-x64
** (Mix) `mix tailwind default` exited with 8

I googled the error, didnt find anything to fix it

It looks like some problem with tailwind (while installing)
It shouldn’t return “exited with 8”

What OS are you using? :slight_smile:

Ubuntu 20.04 with WSL2 in Windows 11

From what I figured out, it seems to be Ubuntu issue :man_shrugging:

Try restarting PC, if that doesn’t help IDK man …

It would probably help if you make a new project and try the command inside it as well, just to eliminate (or confirm) a system-wide issue.

mix phx.new hello2
cd hello2
# updated condif/dev.exs postgres password
mix ecto.create
mix phx.server

Still same issue

I don’t know then, maybe it’s time to inspect its source and check for what can potentially go wrong. I got no idea.

Already restarted, the issue persists

Yeah, this is probably Ubuntu issue, when mix task tries to install tailwind.
Could be some file command error…
Create issue on Elixir Tailwind GitHub because package should handle this.

Just wondering what is the result of :os.type command?
Open iex and run it please :slight_smile:

:os.type
:erlang.system_info(:system_architecture)

I just found that the WSL version for that distro was still 1, you can check it doing wsl --list --verbose in powershell, I upgraded to WSL 2 and it’s working now. Thank you so much anyways!

3 Likes