BUG: Out-of-the-box compatibility with Phoenix 1.8+ unclear. (Tailwind issue)

[infovore]

Description

Phoenix 1.8+ has moved to using Tailwind 4, which makes some major changes to TW3, not least in how it's configured and processed. The default CSS and config supplied with Phoenix 1.8 assumes Tailwind 4; however, mix live_vue.setup installs TW ^3.4.3 and as a result, asset-building fails.

Actual Behavior

vite v5.4.19 building for production...
transforming...
✓ 17 modules transformed.
x Build failed in 243ms
error during build:
[vite:css] [postcss] postcss-import: /path/to/live_vue_phx/assets/node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"

Expected Behavior

Assets to correctly compile.

Environment

LiveVue: 0.7.2
Phoenix: 1.8.0
Phoenix LiveView: 1.1.4
Elixir: 1.18.3
Node: v22.11.0
Npm: 10.9.0
Vue:

# Paste the output here
Operating system: MacOS Sonoma (14.x)

[ruilopesm]

I have recently gone through the same problem while setting up a project with live_vue and phoenix 1.8.

I managed to successfully overcome it and can take care of this issue, if @Valian assigns it to me :D

For a first fix I think it is enough to modify some of the files living in copy folder. But it would be nice to add a functional installer with igniter later on.

[infovore]

@ruilopesm do you have a link to sample code, in the meantime? I've managed to fix compilation (by bumping the package.json to v4, and tearing tailwind out of PostCSS); build is successful, but it's completely failing to compile tailwind classes from my .ex and .heex files (before I've even started writing Vue).

[ruilopesm]

@infovore I think this commit has everything I have done. If you run into any problem, let me know.

[infovore]

@ruilopesm Thanks, that was exactly what I needed - appreciate you linking it. Even if it doesn't get merged in immediately, that should help anyone else with the issue too.

(Not the first Tailwind-4 related pain in any number of platforms I've encountered).

[Valian]

Hi @ruilopesm and @infovore !

Indeed I didn't find the time yet to update installation instructions to TW4 or phoenix 1.8. I went through it in my own personal project recently and it's not hard, as you @ruilopesm noticed. If you could pick it up @ruilopesm it would be amazing!

I've made some effort to start working on igniter installer as obviously it would be the best possible DX. The plan is to use https://github.com/LostKobrakai/phoenix_vite as a foundation. I've created some PRs there improving the integration with Vite, eg LostKobrakai/phoenix_vite#12. Soon we should be able to simply build installation of live_vue on top of phoenix_vite, which should be fairly straightforward:

1. Add config.exs options
2. Copy JS files
3. Adjust my_app_web
4. Add support for SSR in Vite via plugin (current live_vue plugin does it, but it would need to be simplified since some of these things are already done by phoenix_vite).

But still, it would take some serious effort to make it work. For now it would be really great if @ruilopesm could submit a PR with updated installation instructions for TW 4 and Phoenix 1.8 🙏

Just a question if we still want to support TW 3 in installation instructions. I would say, not necessarily? We can always point out to version 0.7 as the last one supporting TW 3.