Where should the CSS reside in a Phoenix Liveview app with --no-tailwind?

Phoenix Forum Questions / Help
, ,
1

I am a back end programmer, and looking forward to team up with a front end guy. He likes to do plain CSS, so tailwind is not an option, as I want to make the process as frictionless as possible.

I’ve saffolded an app with mix phx.new --no-tailwind and figured out there is no CSS anymore in the assets folder…

There is one in the priv/static/assets folder, though. I am used to have this file being overwritten by phoenix, and thus not include it in the git repo. It seems to me though that there is no other CSS in the project, so I am wondering if my partner should write directly in that file, and thus have it included in the git repo.

Is that the way to go in our context? Feels odd a little not having it in the assets folder…

1 Like
2

I agree that it’s a little odd that it doesn’t set up a CSS file for you if you don’t choose Tailwind, though there’s probably a good reason!

In any event, all you have to do is create assets/css/app.css then add:

import "../css/app.css"

to the top of assets/js/app.js and you should be good to go.

3 Likes
3

For plain CSS I recommend you and your fellow frontend guy to try Lightningcss. Here’s how it can be configured:

Install Lightningcss inside assets/ directory.

cd assets/ && npm install --save-dev lightningcss

Specify browserlist option in assets/package.json.

{
  "browserslist": [
    "since 2022-12-01"
  ],
  ...
}

Add lightningcss tasks to mix.exs.

defp aliases do
  [
    ...,
    lightningcss:
      "cmd npm exec --prefix assets -- lightningcss assets/styles/*.css --output-dir ./priv/static/styles --browserslist --nesting",
     # for production
     "lightningcss.minify": "lightningcss --minify",
     "assets.deploy": ["lightningcss.minify", ..., "phx.digest"]
  ]
end

For development I use watchexec as it doesn’t leave zombie processes after closing a dev server. Watchexec should be installed and added to the Phoenix Watchers list in config/dev.exs.

config :my_app, MyAppWeb.Endpoint,
  ...,
  watchers: [
     watchexec: [
       "--watch",
       "assets/styles",
        "--exts",
        "css",
        "--no-meta",
        "--stdin-quit",
        "mix lightningcss"
    ],
    ...
  ]