Adding Tailwind to an older Phoenix project

Phoenix Forum Questions / Help
,
1

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!

2

Does the new app work for you? If it doesn’t, it sounds like maybe esbuild, tailwind, or both are not downloading as part of mix assets.setup. If they’re downloaded, you should be able to run the commands normally, like tailwind default --minify. Maybe that’d point to a better error message if that is happening. The config file tailwind.config.js having a JS syntax error could produce something like this.

3

I didn’t even think to check, but assets.setup and assets.build do both work on a newly generated project, so I don’t believe it’s a platform issue.

I do see both the tailwind and esbuild executables in my _build directory, and esbuild has been in the project forever. For some reason esbuild doesn’t see tailwind. tailwind default works fine, but esbuild default throws an error as before.

I’ll sift through the new project again and see if i’m missing anything, but if I go verbatim off of the official Tailwind documentation, nothing has been left out. I’m thinking it is some assumption esbuild makes, as this project was first build long before even webpack was a thing in Phoenix, so it has survived several upgrades.

I also don’t believe it is the tailwind config, as it was copied directly from the newly generated project, and tailwind doesn’t throw any errors

4

Wow okay, so my app.js still had import css from "../css/app.css" at the top. Removing that fixed the issue :tada:

2 Likes