Autocompletion doesn't work after installing V3

buffalodebile commented 2 years ago

What version of Tailwind CSS IntelliSense are you using?

v0.7.4

What version of Tailwind CSS are you using?

v3

What package manager are you using?

CDN

What operating system are you using?

Windows 10

Describe your issue

Hi, I've just installed the new Tailwind 3 CDN using the Then updated the VS code extension to v0.7.4 and the autocompletion doesn't work anymore.

Does anyone have an idea of why it doesn't work anymore? Thanks.

Nzent commented 2 years ago

Same problem

bradlc commented 2 years ago

Hey @BuffaloDebile. Do you have the tailwindcss module installed, and a valid tailwind.config.js file?

buffalodebile commented 2 years ago

Hi @bradlc thanks for your answer.

No I have just installed the play CDN 3, I do not want to do an NPM install. In the previous version, it was possible to have autocompletion with CDN, is this not the case anymore?

signheim commented 2 years ago

I have the same problem and got his log:

Found Tailwind CSS config file: /Users/me/Documents/frontend/Tailwind-3/boilerplate/tailwind.config.js Loaded postcss v8.4.4: /Users/me/node_modules/postcss Loaded tailwindcss v3.0.2: /Users/me/node_modules/tailwindcss [Error - 5:16:54 PM] Tailwind CSS: format is not a function TypeError: format is not a function at /Users/me/node_modules/tailwindcss/lib/lib/setupContextUtils.js:197:47 at /Users/me/node_modules/tailwindcss/lib/lib/setupContextUtils.js:209:25 at /Users/me/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:360540 at Array.forEach () at /Users/me/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:360034 at /Users/me/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:362119 at Generator.next () at o (/Users/me/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:348919) at processTicksAndRejections (internal/process/task_queues.js:93:5)

I installed a config and tailwind css is also installed (v 3). I am using cli-mode. Interesting that Postcss is still checked. This did not appear before updating to tailwind css 3

adrianmak commented 2 years ago

Im using the new standalone tailwind css cli. Does the extension work with it ?

onurozer commented 2 years ago

I'm having the same problem when using Tailwind CLI that comes with tailwindcss-rails. The extension doesn't autocomplete class names. VSCode output panel displays the error:

[Error] Tailwind CSS: Can't resolve 'tailwindcss' in '/rails7-project-folder/config'

pekosong commented 2 years ago

after installed tailwind@lastest with cli, autocompeletion, hover, ..etc everything not working (works well tailwind v2)

error below

Tailwind CSS: format is not a function

austinbutler commented 2 years ago

OS: Arch Linux
Package manager: Nix
Tailwind version: CLI v3.0.6
Tailwind extension version: v0.7.4

Output panel:

[Error - 4:45:45 PM] Tailwind CSS: Can't resolve 'tailwindcss' in '/home/austin/Documents/web'
Error
at new y (/home/austin/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.4/dist/server/tailwindServer.js:56:288476)
at /home/austin/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.4/dist/server/tailwindServer.js:56:357793
at Generator.next (<anonymous>)
at o (/home/austin/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.4/dist/server/tailwindServer.js:56:350663)
at processTicksAndRejections (internal/process/task_queues.js:93:5)

Tailwind config:

module.exports = {
content: ["./templates/**/*.html"],
theme: {
extend: {},
},
plugins: [],
}

Checking process.env.PATH in VS Code dev tools I see tailwindcss is there. Looking in the extension code it seems to be looking for tailwindcss in the same folder as the config file, which won't work. I could be missing another lookup but seems like the extension hasn't been updated for the standalone CLI yet?

tesar-tech commented 2 years ago

Same. Using Standalone CLI (but I am not sure how to tell this fact to the extension). No node.js installed.

sprite2005 commented 2 years ago

I'm having the same problem when using Tailwind CLI that comes with tailwindcss-rails. The extension doesn't autocomplete class names. VSCode output panel displays the error:

[Error] Tailwind CSS: Can't resolve 'tailwindcss' in '/rails7-project-folder/config'

Same issue. Hoping there will be a fix for this soon.

schmidp commented 2 years ago

I am also using Rails 7 and get the following error:

[Error - 11:50:48 AM] Tailwind CSS: Can't resolve 'tailwindcss' in '/Users/schmidp/Development/xxxxx/config'
Error
    at new y (/Users/schmidp/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.4/dist/server/tailwindServer.js:56:288476)
    at /Users/schmidp/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.4/dist/server/tailwindServer.js:56:357793
    at Generator.next (<anonymous>)
    at o (/Users/schmidp/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.4/dist/server/tailwindServer.js:56:350663)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

% which tailwindcss                                                                                                                                                             
/opt/homebrew/lib/ruby/gems/3.0.0/bin/tailwindcss

The developer tools show the binary in the path:

process.env.PATH
"/opt/homebrew/lib/ruby/gems/3.0.0/bin:.............."

RooSoft commented 2 years ago

On MacOS 12.1, I got the tailwindcss standalone executable in /usr/local/bin, and thus in the path. It's usable in the terminal, everything seems fine.

No help from the plugin in the editor... tried to copy the executable directly in the project's folder, same result.

Now, despite not depending on npm at all in the project, I've decided to make a package.json with tailwindcss as a dependency... npm install... and eureka, the plugin works.

Is there a way to tell the plugin where the standalone executable is, in order to remove that npm dependency?

loicnestler commented 2 years ago

Getting the same error as @signheim when trying to use the Tailwind CSS IntelliSense extension in my code-server instance:

Found Tailwind CSS config file: /root/workspace/xxx/yyy/tailwind.config.js
Loaded postcss v8.3.11: /root/workspace/xxx/yyy/node_modules/.pnpm/postcss@8.3.11/node_modules/postcss
Loaded tailwindcss v3.0.8: /root/workspace/xxx/yyy/node_modules/.pnpm/tailwindcss@3.0.8_0c54bdadaf9d9c9c6c134cb2c6c061a3/node_modules/tailwindcss
[Error - 1:03:48 AM] Tailwind CSS: format is not a function
TypeError: format is not a function
    at /root/workspace/xxx/yyy/node_modules/.pnpm/tailwindcss@3.0.8_0c54bdadaf9d9c9c6c134cb2c6c061a3/node_modules/tailwindcss/lib/lib/setupContextUtils.js:197:47
    at /root/workspace/xxx/yyy/node_modules/.pnpm/tailwindcss@3.0.8_0c54bdadaf9d9c9c6c134cb2c6c061a3/node_modules/tailwindcss/lib/lib/setupContextUtils.js:209:25
    at /root/.local/share/code-server/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:360540
    at Array.forEach (<anonymous>)
    at /root/.local/share/code-server/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:360034
    at /root/.local/share/code-server/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:362119
    at Generator.next (<anonymous>)
    at o (/root/.local/share/code-server/extensions/bradlc.vscode-tailwindcss-0.7.1/dist/server/tailwindServer.js:56:348919)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Are there any update on this?

⚠️ EDIT: Nvm, OpenVSX just doesn't have the latest release yet. Installing v0.7.4' .vsix manually solved the issue for me.

ahsf commented 2 years ago

Same issue when using phoenix/tailwind, which also relies on standalone CLI.

bradlc commented 2 years ago

Hey all! We just released v0.7.5 of the extension, which ships with a built-in version of tailwindcss. This means that IntelliSense now works without a local tailwindcss installation, for example if you are using the standalone CLI. You still need a valid tailwind.config.js file, so make sure to create one if you haven't already (if you're using Rails or Phoenix the chances are you already have one and you should be good to go once you've updated the extension!)

CDN users can also create a tailwind.config.js file in a workspace to activate IntelliSense, just be aware that the config file is not actually being used by the CDN in this case (check out the docs for how to use a custom config with the CDN)

If you run into any issues please let us know 🙏

cabgfx commented 2 years ago

Thank you all so much! Super appreciated ❤️

stephenbiggs commented 2 years ago

The update doesn't seem to work for me. Anyone else experiencing the same?

BobWalsh commented 2 years ago

Anyone stumbling over the same issue of tailwind completion not happening in .erb files, see Tailwind CSS autocomplete in VSCode with Ruby on Rails. It was the key for me.

gmrcp commented 2 years ago

After following the medium article @BobWalsh mentioned, I still couldn't get it to work. What did it for me was following the recommended VSCode settings in the extension page that I completely jumped over 😅 This was the missing piece in the settings.json:

"editor.quickSuggestions": {
  "strings": true
}

zackha commented 1 year ago

If you are working with nuxt3, you can try this.

Add the following configuration to your .vscode/settings.json file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:

"tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
"files.associations": {
    "*.css": "tailwindcss"
}

detailed: link

tailwindlabs / tailwindcss-intellisense

Autocompletion doesn't work after installing V3 #448