I’m having some issues adding Tailwind into an existing project, and I’m hoping the community can help me. I’ve tried a few different methods for adding Tailwind into the project, but they end up with this error, and I can’t seem to find any information about it online:

% mix assets.setup
% mix assets.build

Rebuilding...

Done in 348ms.
✘ [ERROR] Could not resolve "tailwindcss/base"

    css/app.css:3:8:
      3 │ @import "tailwindcss/base";
        ╵         ~~~~~~~~~~~~~~~~~~

  You can mark the path "tailwindcss/base" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "tailwindcss/components"

    css/app.css:4:8:
      4 │ @import "tailwindcss/components";
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "tailwindcss/components" as external to exclude it from the bundle, which will remove this error.

✘ [ERROR] Could not resolve "tailwindcss/utilities"

    css/app.css:5:8:
      5 │ @import "tailwindcss/utilities";
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "tailwindcss/utilities" as external to exclude it from the bundle, which will remove this error.

3 errors
** (Mix) `mix esbuild default` exited with 1

I’ve followed the official Tailwind guide on adding it to a Phoenix project, as well as poked around a new project generated with mix phx.new and can’t seem to nail it down. I’ve taken several steps:

app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

• added asets/tailwind.config.js (from a new Phoenix project

mix.exs

      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
      "assets.build": ["tailwind default", "esbuild default"],
      "assets.deploy": [
        "tailwind default --minify",
        "esbuild default --minify",
        "phx.digest",
        "cmd cp -r assets/static/* priv/static/"
       ]

config.exs

config :esbuild,
  version: "0.17.11",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --loader:.svg=file --loader:.woff=file --outdir=../priv/static/assets),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

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

dev.exs

watchers: [
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--watch)]},
    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
  ]

mix.exs dep: {:tailwind, "~> 0.2.0", runtime: Mix.env() == :dev}

I’ve plodded around a newly generated app but nothing else seems to stand out other than the changes made above. Any help is highly appreciated!