Phoenix 1.8 upgrade Tailwind issues

Phoenix Forum Questions / Help
, ,
1

While upgrading an older phonix 1.7 app to the newer phoenix 1.8, I am running into an issue with the new tailwind css config

mix assets.build

13:45:27.039 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.7/tailwindcss-macos-x64

≈ tailwindcss v4.1.

Error: Can't resolve 'tailwindcss/base' in '/Users/satb/projects/myproj/assets/css'

I checked all places where I could. Can’t find which part of the upgrade I am missing.

mix.exs:

project section:

 compilers: [:phoenix_live_view] ++ Mix.compilers(),
 listeners: [Phoenix.CodeReloader]

deps section:

{:tailwind, "~> 0.3", runtime: Mix.env() == :dev},

aliases section:
"assets.deploy": [
        "tailwind myproj --minify",
        "esbuild myproj --minify",
        "phx.digest"
      ],

config.exs:

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

I fixed the app.css file and copied the new version into it.

app.css at the top now:

@import "tailwindcss" source(none);
@source "../css";
@source "../js";
@source "../../lib/myproj_web";

Tried removing the tailwind.config.js file also and removing that option in mix.exs but made no difference.

What else is missing? Any help?

2

Have a look at phoenixdiff.org this can help you check that other files need to be modified

1 Like
3

The Updating from Tailwind v3 to v4 section might be what you’re looking for:

4

Thanks. I did all that this one shows. Still scratching my head.

5

Seems like if I switch from

@import "tailwindcss" source(none);

To

@import "tailwindcss";

I don’t get the error anymore.
Not sure why that would cause a problem though TBH.

6

OK. I give up. I added the source(none) again, and it works fine now. Totally lost and burned several hours on this only to not know what went wrong or why removing source(none) fixed it and why adding it back didn’t break it again.

7

Sometimes, turning it off and on again fixes things… lol

1 Like