Tailwind intellisense does not work natively with tailwindcss-ruby when using Tailwind V4.X

[ryancbahan]

I'm upgrading a few apps that use tailwindcss-rails to Tailwind v4. The tailwind rails gem uses tailwindcss-ruby, which vendors the Tailwind executable rather than getting it via npm or node_modules.

This seems to be breaking tailwind intellisense, which appears to always be looking for the tailwind executable in node_modules. When I put a debugger in the extension, I can see output:

Error: Can't resolve 'tailwindcss' in 'app/assets/tailwind'
    at finishWithoutResolve (/Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:2939:25)
    at /Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:3023:26
    at /Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:3073:13
    at eval (eval at create (/Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:1542:19), <anonymous>:15:1)
    at /Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:3073:13
    at eval (eval at create (/Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:1542:19), <anonymous>:27:1)
    at /Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:3878:52
    at /Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:3073:13
    at eval (eval at create (/Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:1542:19), <anonymous>:15:1)
    at /Users/ryan/tailwindcss-intellisense/packages/vscode-tailwindcss/dist/server.js:3073:13 {
  details: "resolve 'tailwindcss' in 'app/assets/tailwind'\n" +
    '  Parsed request is a module\n' +
    '  using description file: package.json (relative path: ./app/assets/tailwind)\n' +
    '    using description file: package.json (relative path: ./app/assets/tailwind/tailwindcss)\n' +
    '      no extension\n' +
    "        app/assets/tailwind/tailwindcss doesn't exist\n" +
    '      .css\n' +
    "        app/assets/tailwind/tailwindcss.css doesn't exist\n" +
    '      as directory\n' +
    "        app/assets/tailwind/tailwindcss doesn't exist\n" +
    '    resolve as module\n' +
    "      app/assets/tailwind/node_modules doesn't exist or is not a directory\n" +
    "      app/assets/node_modules doesn't exist or is not a directory\n" +
    "      app/node_modules doesn't exist or is not a directory\n" +
    '      looking for modules in node_modules\n' +
    '        single file module\n' +
    '          using description file: package.json (relative path: ./node_modules/tailwindcss)\n' +
    '            no extension\n' +
    "              node_modules/tailwindcss doesn't exist\n" +
    '            .css\n' +
    "              node_modules/tailwindcss.css doesn't exist\n" +
    "        node_modules/tailwindcss doesn't exist\n" +
    "      components/node_modules doesn't exist or is not a directory\n" +
    '      looking for modules in node_modules\n' +
    '        single file module\n' +
    '          using description file: package.json (relative path: ./node_modules/tailwindcss)\n' +
    '            no extension\n' +
    "              node_modules/tailwindcss doesn't exist\n" +
    '            .css\n' +
    "              node_modules/tailwindcss.css doesn't exist\n" +
    "        node_modules/tailwindcss doesn't exist\n" +
    "      node_modules doesn't exist or is not a directory\n" +
    "      node_modules doesn't exist or is not a directory\n" +
}

Ideally, I'd like to be able to support providing a custom path to the Tailwind executable, rather than needing to add tailwind to my package.json just for the vscode extension. Is there currently a workaround for supporting Tailwind via tailwindcss-ruby?

[thecrypticace]

Hey! What version of the extension are you using?

I ask because the extension (and LSP) is designed to load Tailwind CSS APIs through Node (technically Electron when running in VSCode but Node outside). But with the standalone CLI it cannot do that. The way we work around this is by supporting a "fallback" version of Tailwind CSS when it can't find an installed one. I added support for loading a bundled version of v4 in v0.14.3 of the extension so it might fail if you're using an older extension.

Ideally, I'd like to be able to support providing a custom path to the Tailwind executable,

I wish this were possible but it's not. The Standalone CLI would itself have to function as a language server to be able to communicate with the extension. I have some ideas on how to make this work but it's not so simple since our LSP has to support multiple versions of Tailwind CSS (going all the way back to v1.x 😱)

[thecrypticace]

If you're on the latest version, could you provide a reproduction repo I can test with? It's possible we're not handling the fallback version correctly in all cases.

[ryancbahan]

Here's a reproduction repro: https://github.com/ryancbahan/tailwindcss-intellisense-repro

I'm using version 0.14.6. It does fall back to a bundled version of tailwind, but I was hoping to leverage intellisense for our custom config as we have a large project with a lot of updated settings.

It sounds like we'd need a node dist of Tailwind to accomplish this given the context you provided (thank you!), and using tailwindcss-ruby would necessarily force using the fallback, since it's just a wrapper for the Tailwind CLI. Is that correct?

I have some ideas on how to make this work

I would be interested in helping this along if it's feasible.

Thank you for your fast reply!

[thecrypticace]

Ah, it will still load your stylesheet so your customizations still work. Is there something specific you're seeing that isn't working?

You'll see that in the output you get these two lines:

Error: Can't resolve 'tailwindcss' in '
…
[Error - 4:26:45 PM] Loading fallback stylesheet for: tailwindcss

This means that while we couldn't load tailwindcsss stylesheet from your local installation we did load the fallback version that's bundled with IntelliSense. I should probably tweak this so it's not exactly an error in the logs (though if you had an NPM install it'd preferably still be considered an "error").

The biggest thing not supported in the fallback mode right now is importing APIs from the tailwindcss package in configs and plugins. This is because Node just didn't have the APIs to handle this properly until recently (v23.6.0+) and VSCode/Electron is still based on Node.js 20.