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.

[jbigler]

I am able to get Tailwind intellisense working with tailwindcss-rails (and tailwindcss-ruby) by pointing to the default tailwind configuration file in the settings.json file:

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

It loads the fallback stylesheet for tailwindcss as you describe.

However, if I add the official plugins to application.css

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/aspect-ratio';
@plugin '@tailwindcss/typography';

It works fine in Rails, but I lose my intellisense because it tries to find those plugins in the non-existent node_modules. However, those plugins are bundled inside the CLI tool, so there should also be a fallback for them.

Instead my intellisense is broken and I get the following errors in the Tailwind Intellisense log:

[Error - 5:56:37 PM] Unable to load plugin: @tailwindcss/typography Error: Can't resolve '@tailwindcss/typography' in '/home/jeff/workspace/company/rails-project/app/assets/tailwind'
    at d (/home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:130:7155)
    at /home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:131:713
    at /home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:134:405
    at eval (eval at create (/home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:5:78), <anonymous>:15:1)
    at /home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:134:405
    at eval (eval at create (/home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:5:78), <anonymous>:27:1)
    at /home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:134:7916
    at /home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:134:405
    at eval (eval at create (/home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:5:78), <anonymous>:15:1)
    at /home/jeff/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:134:405 {
  details: "resolve '@tailwindcss/typography' in '/home/jeff/workspace/company/rails-project/app/assets/tailwind'\n" +
    '  Parsed request is a module\n' +
    '  using description file: /home/jeff/workspace/company/rails-project/package.json (relative path: ./app/assets/tailwind)\n' +
    '    resolve as module\n' +
    "      /home/jeff/workspace/company/rails-project/app/assets/tailwind/node_modules doesn't exist or is not a directory\n" +
    "      /home/jeff/workspace/company/rails-project/app/assets/node_modules doesn't exist or is not a directory\n" +
    "      /home/jeff/workspace/company/rails-project/app/node_modules doesn't exist or is not a directory\n" +
    '      looking for modules in /home/jeff/workspace/company/rails-project/node_modules\n' +
    '        single file module\n' +
    '          using description file: /home/jeff/workspace/company/rails-project/package.json (relative path: ./node_modules/@tailwindcss/typography)\n' +
    '            no extension\n' +
    "              /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography doesn't exist\n" +
    '            .cjs\n' +
    "              /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography.cjs doesn't exist\n" +
    '            .js\n' +
    "              /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography.js doesn't exist\n" +
    '            .json\n' +
    "              /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography.json doesn't exist\n" +
    '            .node\n' +
    "              /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography.node doesn't exist\n" +
    '            .cts\n' +
    "              /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography.cts doesn't exist\n" +
    '            .ts\n' +
    "              /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography.ts doesn't exist\n" +
    "        /home/jeff/workspace/company/rails-project/node_modules/@tailwindcss/typography doesn't exist\n" +
    "      /home/jeff/workspace/company/node_modules doesn't exist or is not a directory\n" +
    "      /home/jeff/workspace/node_modules doesn't exist or is not a directory\n" +
    "      /home/jeff/node_modules doesn't exist or is not a directory\n" +
    "      /home/node_modules doesn't exist or is not a directory\n" +
    "      /node_modules doesn't exist or is not a directory"
}

[thecrypticace]

@jbigler I've added support for loading these specifically via @plugin which v4 makes fairly easy to do. This'll go out in the next release of the extension. Probably going to be next week unless I happen to push out a release tomorrow (I don't plan on it but idk)

Loading these packages when using require() or import() inside of a plugin or config is much more difficult. I'm not sure if it's impossible or not but at the very least it'll require the use of some experimental Node APIs (and doing it properly isn't possible until Node v23.6+).

[jbigler]

That's great! I totally understand regarding external plugins. If someone wanted to use those without npm, they'd probably have to do something like in this comment on the tailwindcss-ruby repo.