Why isn't app.css immediately generated?

Why isn’t app.css immediately generated in a fresh Phoenix project? The app on localhost looks wonky due to the missing CSS and only after, say, 30 s the app.css gets generated and the error, as well as the UI, resolves. Not 100% reproducible, but i do see this issue often. It also happens when a project is cloned & built on another computer.

Not a big issue, though a bit jarring since one is surprised for a few s as to what’s happening. I can imagine newcomers are surprised even more.

phoenix “1.7.2”
phoenix_live_reload “1.4.1”
phoenix_live_view “0.18.18”
tailwind “0.2.0”

Relevant console logs:

[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (AWeb.Router)
    (app 0.1.0) lib/phoenix/router.ex:487: AWeb.Router.call/2
    (app 0.1.0) lib/app_web/endpoint.ex:1: AWeb.Endpoint.plug_builder_call/2
    (app 0.1.0) lib/plug/debugger.ex:136: AWeb.Endpoint."call (overridable 3)"/2
    (app 0.1.0) lib/app_web/endpoint.ex:1: AWeb.Endpoint.call/2
    (phoenix 1.7.2) 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.9.0) /path/to/project/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
    (cowboy 2.9.0) /path/to/project/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
    (cowboy 2.9.0) /path/to/project/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
    (stdlib 4.0.1) proc_lib.erl:240: :proc_lib.init_p_do_apply/3

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme


Done in 757ms.
[debug] Live reload: priv/static/assets/app.css

Similar existing threads:

I think in default installation it has to download the package for Tailwind as the default scaffold does not include it, and this takes some time.

Is there any way to download it with a mix command?

Yes, there appear to be Mix tasks provided by the library Phoenix uses (and created) to wrap up and deliver Tailwind:


Thanks. This explains the behaviour: the “tailwind” dependency runs its Mix task in parallel and if the network is a bit flaky, then it can very well finish noticeably later.

So one can serialize it by explicitly front-running the task

mix tailwind default --config=tailwind.config.js \
        --input=css/app.css \
        --output=../priv/static/assets/app.css \
&& ...