Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
ryancbahan opened this issue Feb 20, 2025 · 7 comments
Open

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

ryancbahan opened this issue Feb 20, 2025 · 7 comments
Assignees
@thecrypticace
Labels
question Further information is requested

Comments

@ryancbahan
Copy link

ryancbahan commented Feb 20, 2025 •
edited
Loading

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
Copy link
Contributor

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 thecrypticace self-assigned this Feb 20, 2025
@thecrypticace thecrypticace added the question Further information is requested label Feb 20, 2025
@thecrypticace
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link

jbigler commented Feb 27, 2025

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 thecrypticace mentioned this issue Feb 27, 2025
Merged
thecrypticace added a commit that referenced this issue Feb 27, 2025
@thecrypticace
v4: Support loading bundled versions of some first-party plugins (#1240)
c8efeca 
see
#1224 (comment)

This adds support for loading these three plugins in v4 **only when
using `@plugin`** if we can't find them:
- `@tailwindcss/typography`
- `@tailwindcss/forms`
- `@tailwindcss/aspect-ratio`

This coincides with behavior of the Standalone CLI where these are
bundled instead of available as an NPM package.

I've additionally logs when trying to import one of these plugins inside
a JS file. This does not work right now and may take some effort to
support because it will at least require the use of Node's experimental
loader's API and potentially additional work as well.
@thecrypticace
Copy link
Contributor

@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
Copy link

jbigler commented Feb 28, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thecrypticace thecrypticace

Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jbigler @thecrypticace @ryancbahan