Plugins can't import `tailwindcss/plugin` when using Standalone CLI or CDN

[jtokoph]

What version of VS Code are you using?

v1.99.0

What version of Tailwind CSS IntelliSense are you using?

v0.14.13

What version of Tailwind CSS are you using?

Using bundled version of tailwindcss: v4.1.1

What package manager are you using?

None

What operating system are you using?

macOS

Tailwind config

https://github.com/jtokoph/tailwind-phoenix-error-poc/blob/master/assets/css/app.css

VS Code settings

{
  "tailwindCSS.experimental.configFile": "assets/css/app.css"
}

Reproduction URL

https://github.com/jtokoph/tailwind-phoenix-error-poc

Describe your issue

When starting with a default install of the Elixir Phoenix Framework, which uses the standalone tailwind cli along with a config-in-CSS approach, the extension fails to load with the error: Error: Can't resolve 'tailwindcss/plugin'

The standalone version of the tailwind cli is able to compile without error.

Full log output here:

Locating server…
Booting server...
Setting up server…
Listening for messages…
Loading Tailwind CSS projects from the workspace settings.
[Global] Creating projects: [{"folder":"/Users/jtokoph/src/poc","config":"/Users/jtokoph/src/poc/assets/css/app.css","selectors":[{"priority":0,"pattern":"/Users/jtokoph/src/poc/**"}],"user":true,"tailwind":{"version":"4.1.1","features":["css-at-theme","layer:base","content-list","source-inline","source-not"],"isDefaultVersion":true}}]
[Global] Preparing projects...
[Global] Initializing projects...
[assets/css/app.css] Initializing...
[Global] Adding watch patterns: /Users/jtokoph/src/poc/assets/css/app.css, /Users/jtokoph/src/poc/assets/css, /Users/jtokoph/src/poc/assets, /Users/jtokoph/src/poc
[assets/css/app.css] Failed to load workspace modules.
[assets/css/app.css] Using bundled version of `tailwindcss`: v4.1.1
[assets/css/app.css] Building...
[Error - 11:35:15 AM] Loading fallback stylesheet for: tailwindcss
[Error - 11:35:15 AM] Unable to load plugin: ../vendor/heroicons Error: Can't resolve 'tailwindcss/plugin' in '/Users/jtokoph/src/poc/assets/vendor'
    at d (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:130:7155)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:131:713
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:405
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:15:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:405
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:16:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:405
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:15:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:405
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:15:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:405
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:42:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:6990
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:405
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:16:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2396
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:20548
    at UAe.stat (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:1272)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:20279
    at r (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2342)
    at k6.exports (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2453)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:20263
    at _next0 (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:8:1)
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:30:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:135:1921
    at w_.eval [as callAsync] (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:22:1)
    at t.doResolve (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:344)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:6922
    at w_.eval [as callAsync] (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:37:1)
    at t.doResolve (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:344)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:21097
    at w_.eval [as callAsync] (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:7:1)
    at t.doResolve (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:344)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:21097
    at w_.eval [as callAsync] (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:7:1)
    at t.doResolve (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:344)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:21097
    at _next0 (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:8:1)
    at eval (eval at create (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:5:78), <anonymous>:30:1)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:7618
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:3388
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2396
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2752
    at UAe.n.readJson (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:1943)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2650
    at r (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2342)
    at k6.exports (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2453)
    at l (/Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2583)
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:3383
    at /Users/jtokoph/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.13/dist/tailwindServer.js:134:2396 {
  details: "resolve 'tailwindcss/plugin' in '/Users/jtokoph/src/poc/assets/vendor'\n" +
    '  Parsed request is a module\n' +
    '  No description file found in /Users/jtokoph/src/poc/assets/vendor or above\n' +
    '  resolve as module\n' +
    "    /Users/jtokoph/src/poc/assets/vendor/node_modules doesn't exist or is not a directory\n" +
    "    /Users/jtokoph/src/poc/assets/node_modules doesn't exist or is not a directory\n" +
    "    /Users/jtokoph/src/poc/node_modules doesn't exist or is not a directory\n" +
    "    /Users/jtokoph/src/node_modules doesn't exist or is not a directory\n" +
    "    /Users/jtokoph/node_modules doesn't exist or is not a directory\n" +
    "    /Users/node_modules doesn't exist or is not a directory\n" +
    "    /node_modules doesn't exist or is not a directory"
}
[Global] Initialized 1 projects

[thecrypticace]

Hey! This is a known issue but I'm not sure how fixable this is for us currently.

I added support for a "fallback" version of Tailwind CSS here: #1157 but knowingly left out support for tailwindcss/plugin imports from JS/TS files.

Some details:

Limitations in Node.js itself prevent us from intercepting these import / require calls easily. This seems to have been addressed in Node v23.6.0 by giving us experimental hooks for synchronous module loading. However, no version of Electron and by extension VSCode exists that is based on Node >= v23.6. As such I've not gone forward with trying to make this work.

Even in the Standalone CLI where this does work, we actually use Bun and special builtin Bun APIs to make this function. They're not exactly equivalent to the new experimental Node APIs but ultimately enable similar functionality.

I experimented a bit with using the experimental asynchronous module hooks (an older, existing API but more limited in some ways) in Node / Electron but I ran into roadblocks with this as well. It's something I plan to look into again.

A workaround, although unfortunate, is to install tailwindcss via NPM with a package.json in your project root or maybe just even in your assets folder.

[jtokoph]

Ah, usage of Bun makes so much sense now. I was getting odd flip-flopping of errors like [Error - 12:58:25 PM] Error: The plugin "../vendor/daisyui" does not accept options depending on if I set my project and assets type to commonjs or module. I had 2 package.json files at one point of debugging this and depending on the type one would work and one wouldn't. I could never get a config that both would be happy with.

So I ended up just adding a package.json to my assets directory and installing tailwindcss and daisyui instead of vendoring they way Phoenix defaults to.

I think I'll have to add an npm install step to any builds, but I'll cross that bridge when I get there.

Thanks.

[jtokoph]

In case anyone stumbles upon this and needs a quick workaround.

1. Create this package.json file in assets

{
  "name": "assets",
  "dependencies": {
    "daisyui": "^5.0.16",
    "tailwindcss": "^4.1.3"
  }
}

2. Update the app.css plugins for daisy

- @plugin "../vendor/daisyui" {
+ @plugin "daisyui" {

- @plugin "../vendor/daisyui-theme" {
+ @plugin "daisyui/theme" {

3. Delete assets/vendor/daisyui-theme.js and assets/vendor/daisyui.js
4. Update mix.exs

-      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
+      "assets.setup": [
+        "tailwind.install --if-missing",
+        "esbuild.install --if-missing",
+        "cmd --cd assets npm install"
+      ],

This should now enable successful assets builds and allow the vscode extension to work.

[nshafer]

Thanks for your efforts @thecrypticace in addressing this. I'm hoping a solution can be found.

For some context, I came across this problem while working with the a project scaffolded with the new Phoenix 1.8 release candidate. It is using the standalone tailwind CLI and importing daisy-ui and a custom plugin, which works fine for building the project, but this extension is non-functional with these errors. Phoenix has specifically chosen not to include any dependency on node or bun for projects, instead opting for the standalone tailwind cli for new projects generated with mix phx.new. So the workaround will never be integrated in the project generator, and so once Phoenix 1.8 is out, there are going to be a lot of new users confused why this extension doesn't work. They can of course use npm or bun to install the dependencies and update their project, but it would be really nice if this worked out of the box.

Keep us posted and thanks again!