How to apply CSS to Phoenix 1.7.14 app

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.

capture 2024-08-04 1316561900×911 55.5 KB

On a default fresh project, mix phx.server will automatically build JS and CSS assets in development mode (which is different when running in MIX_ENV=prod), you shouldn’t need that extra install of tailwind, as esbuild and tailwind are managed by the Phoenix app itself.

Any chance you have the environment variable set?

What do you get in the console after you run mix phx.server?

It should automatically install and run esbuild and tailwind for you, watching for chances to recompile JS and CSS.

The esbuild and tailwind packages install standalone binaries, but you must issue a command to download them the first time or whenever you change the version. The out-of-the-box mix.exs file will have some aliases to simplify this, so it will install during mix setup, and then they will build automatically when running mix phx.server. You can also separately run mix assets.setup to install both, then mix assets.build to run them. There is also mix assets.deploy for your production build.