Issue with TailwindCSS 4.0.0

[Enuzo]

Installation:
Elixir 1.18.2, Phoenix: 1.17.18

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

Issue:
Tailwind installation not working for tailwind css v4.0.0. I get the following message:
Error: Can't resolve 'tailwindcss/base' in '/home/xxx/_phx/usis/assets/css'
[info] GET /
[debug] Processing with UsisWeb.PageController.home/2
Parameters: %{}
Pipelines: [:browser]
[info] Sent 200 in 106ms
[info] GET /assets/app.css
[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (UsisWeb.Router)
(usis 0.1.0) deps/phoenix/lib/phoenix/router.ex:541: UsisWeb.Router.call/2
(usis 0.1.0) lib/usis_web/endpoint.ex:1: UsisWeb.Endpoint.plug_builder_call/2
(usis 0.1.0) deps/plug/lib/plug/debugger.ex:136: UsisWeb.Endpoint."call (overridable 3)"/2
(usis 0.1.0) lib/usis_web/endpoint.ex:1: UsisWeb.Endpoint.call/2
(phoenix 1.7.18) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
(bandit 1.6.5) lib/bandit/pipeline.ex:129: Bandit.Pipeline.call_plug!/2
(bandit 1.6.5) lib/bandit/pipeline.ex:40: Bandit.Pipeline.run/4
(bandit 1.6.5) lib/bandit/http1/handler.ex:12: Bandit.HTTP1.Handler.handle_data/3
(bandit 1.6.5) lib/bandit/delegating_handler.ex:18: Bandit.DelegatingHandler.handle_data/3
(bandit 1.6.5) lib/bandit/delegating_handler.ex:8: Bandit.DelegatingHandler.handle_continue/2
(stdlib 6.2) gen_server.erl:2335: :gen_server.try_handle_continue/3
(stdlib 6.2) gen_server.erl:2244: :gen_server.loop/7
(stdlib 6.2) proc_lib.erl:329: :proc_lib.init_p_do_apply/3

Workaround:
Copied version 3.4.4 of tailwind-linux-x64 from another project and paste in _build. Then change tailwind config to version 3.4.4 to get the app to work.

[josevalim]

We don't support tailwind 4.0.0 yet. There is a pull request in the Phoenix repo, additional changes may be necessary.

[eadz]

For reference here is the PR - phoenixframework/phoenix#5990 which references the PRs in the tailwind repo #103 and #107

It appears that a lot of that PR is changing defaults/generators.

On my app, I appear to have it working by following the instructions here - https://elixirforum.com/t/mix-tailwind-4-0-0-beta-1-support/67636/5 ( but using 4.0.0 instead of beta ) with the caveat that I do not have any node modules that import css - that may not work yet. ( note: make sure to change my_app_web to your app name etc.

[odyright]

i tried to use npx @tailwindcss/upgrade@next. without success.

[SteffenDE]

@odyright I just tried

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Failed to resolve import: `tailwindcss/base` in `./app.css`. Skipping.

│ ↳ Failed to resolve import: `tailwindcss/components` in `./app.css`. Skipping.

│ ↳ Failed to resolve import: `tailwindcss/utilities` in `./app.css`. Skipping.

│ ↳ Linked `./assets/tailwind.config.js` to `./assets/css/app.css`

│ Migrating JavaScript configuration files…

│ ↳ Could not load the configuration file: Cannot find module 'tailwindcss/plugin'
│   Require stack:
│   - /Users/steffen/tailwind4/assets/tailwind.config.js

It might be more successful after tailwindlabs/tailwindcss#15934 is merged and released.

[SteffenDE]

Support for Tailwind v4+ is out now! I'm afraid we cannot help with issues concerning the upgrade utility.