Search code examples
elixirphoenix-frameworkphoenix-live-view

Phoenix 1.7 welcome page assets not showing properly

Background

I have a a fresh umbrella project with a Phoenix app inside. To create the app I used the following commands:

  1. mix new test_app --umbrella
  2. cd test_app/apps
  3. mix phx.new.web web_interface --no-dashboard --no-ecto --no-gettext --no-mailer
  4. cd web_interface
  5. Add {Phoenix.PubSub, name: WebInterface.PubSub} to lib/application.ex
  6. Inside web_interface folder mix setup
  7. mix assets.deploy
  8. iex -S mix phx.server

After this last command I am then greeted with:

> λ iex -S mix phx.server 03:18:31.953 [info] Running
> WebInterface.Endpoint with cowboy 2.10.0 at 127.0.0.1:4000 (http)
> 03:18:32.039 [info] Access WebInterface.Endpoint at
> http://localhost:4000 [watch] build finished, watching for changes...
> Interactive Elixir (1.14.1) - press Ctrl+C to exit (type h() ENTER for help) 
> iex(1)> 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 iex(1)> iex(1)>
> Rebuilding... iex(1)> iex(1)> Done in 476ms. iex(1)>

Which outside of the warning for an outdated package, raises nothing to indicate that a step is missing/failed.

However, when I login into localhost:4000, I see this:

enter image description here

Which clearly means something is wrong.

Why is this happening, and how can I fix it?

Solution

  • It seems tailwind is incorrectly configured within umbrella apps, open up apps/web_interface/assets/tailwind.config.js and remove the _web from the content section, e.g.

      content: [
    "./js/**/*.js",
    "../lib/*.ex",
    "../lib/**/*.*ex"
  ],

    (edit: related issue https://github.com/phoenixframework/phoenix/issues/5403)