[v4] Not generating styles for a Laravel project

[mokhosh]

What version of Tailwind CSS are you using?

v4.0.0-alpha.6

What build tool (or framework if it abstracts the build tool) are you using?

vite

What version of Node.js are you using?

v20.9.0

What browser are you using?

Arc

What operating system are you using?

macOS

Describe your issue

I'm trying v4 on a Laravel 11 project. I followed the vite installation steps, installed tailwind and the vite plugin, added the plugin to vite config, imported tailwind in my app.css, and it is compiling, but it doesn't pick up any of the classes that I'm using in my views.

Do I have to somehow tell it where my views are?

[adamwathan]

I think the issue is that our Vite plugin only really works for full-blown Vite projects, and only sees template files actually served by Vite. Blade templates and stuff don't go through Vite, so our Vite plugin doesn't see them and can't pull out the classes.

Try using our PostCSS plugin with Vite instead of the Vite plugin and see if that works.

[mokhosh]

Yup, just tried it and it works with postcss.

Anything we can do to help vite plugin discover blade files?

[Cnexb]

Hi, I am also trying out the v4.0 on my Laravel 11 project too. After install the v4.0 with postcss and follow the steps, there is an error when I npm run dev:

* [ERROR] Missing " /plugin.js" specifier in "tailwindcss" package [plugin vite:dep-pre-bundle]

node_modules/@nextui-org/theme/dist/chunk-50VKTCUZ.mjs:32:19:
32 | import plugin from "tailwindcss/plugin.js";

This error came from the "onResolve" callback registered here:

node_modules/esbuild/lib/main.js:1293:20:
1293 let promise = setup({

Anyone know how to fix this?

[mokhosh]

@Cnexb shouldn't it be tailwindcss with a c?

[Cnexb]

@Cnexb shouldn't it be tailwindcss with a c?

sorry, just a typo when i edited the comment.

[corneliusio]

This issue should probably be renamed as it's not necessarily a Laravel specific issue but actually applies to any projects that integrate with a separate, template handling backend. Or to put it another way if you're using something Blade in Laravel or Twig in Craft CMS with a setup similar to what is outlined at https://vitejs.dev/guide/backend-integration.html, your template files will not be part of the Vite dependency graph.

Based on https://vitejs.dev/guide/backend-integration.html, you'd be forced to use PostCSS (or CLI) to opt into the alternative content detection.

Would be interesting if we could simply pass a flag to the TailwindCSS Vite plugin that would indicate you're using external template files and opt you into the PostCSS/CLI method for content detection.

Edit: Didn't see @adamwathan's response till after I posted the explanation. I would assume this issue will not be a high priority as it's not a blocker—just requires you to add PostCSS as a dep to your project. That said, it would be nice to see a solution here since this is a documented way to use Vite.