Your tailwind config should look something like this:

config :tailwind,
  version: "3.0.10",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

As you can see app.css is already referenced there so no need to have it in app.js.

Webpack conf has one approach, esbuild has another, but really it’s up to you to configure. The new consensus seems to be (logically thinking) that files that don’t get transformed anyway have no reason to start in one place and end in another. And static files are the ones that aren’t compiled or anything.

If you want to import CSS files you should have them in assets/css/, but i haven’t yet had to import them so ot going to assume i know how to import.

I usually put tailwind first, but I’m not sure if it makes a difference.

if you have dependencies in package.json, then yes you need all of node.js still. i try to avoid it, but Alpine.JS for example requires it.

I don’t seem to have it installed. I’m using Tailwind.

The ‘official’ Tailwind integration uses @import "tailwindcss/base";

The fastest way to get a Tailwind LiveView project up and most ‘official’ way is

mix local.hex
mix archive.install hex phx_new
mix phx.new app_name --live --binary-id
mix phx.gen.auth Accounts User users
# https://github.com/phoenixframework/tailwind

That repo is semi-automated and I suggest you go through the steps with a new project, commit every step. This way you’ll understand better what is the current accepted standard and how things work.

I included the auth stuff just because it’s a common need and can be part of the boilerplate.

Disclaimer: I’m still a noob with bad memory. Especially the npm part I’m not fully sure of, even though I have projects with and without package.json.