Why isn't app.css immediately generated?

Phoenix Forum Questions / Help
,
1

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

Rebuilding...

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

Similar existing threads:

2

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.

3

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

4

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

2 Likes
5

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 \
&& ...
2 Likes