priv/static/assets/app.css file is not automatically generated

[voidFunctionReturn0]

Environment

• Elixir version (elixir -v): 1.17.2
• Phoenix version (mix deps): 1.7.14
• Operating system: Ubuntu 22.04.3(WSL)

Actual behavior

I created a Phoenix project with the “phx.new my_app” command.

When I run the Phoenix app with the “mix phx.server” command, the CSS is not applied. In the ‘priv/static/assets’ folder, there is only an ‘app.js’ file and no ‘app.css’ file.

Expected behavior

I solved the problem in the following way.

1. Install node on WSL
2. Add a ‘package.json’ file to the ‘assets’ directory { "name": "my_app", "version": "1.0.0", "description": "", "main": "js/app.js", "scripts": { "deploy": "NODE_ENV=production tailwindcss -o ../priv/static/assets/app.css" }, "dependencies": { "@tailwindcss/forms": "^0.5.7", "tailwindcss": "^3.4.3" } }
3. Run the “npm install” command from the ‘assets’ directory.
4. Run the “npm run deploy” command from the ‘assets’ directory.

[andrewtimberlake]

You shouldn’t need node or a package.json file for a new Phoenix project. mix phx.new with the default options should configure esbuild At the end of the file creation process, the script asks if you want to install dependencies which should run mix assets.setup which installs tailwindcss and esbuild From there mix ecto.create and mix phx.server should be all you need.

I suggest removing your package.json and running mix assets.setup and try from there.

[Gazler]

I suspect you opened the page before the assets had finished building. I'm going to close this issue, but feel free to re-open if it persists.