Autocompletion doesn't work after installing V3

[buffalodebile]

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 <script src="https://cdn.tailwindcss.com"></script>
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]

Same problem

[bradlc]

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

[buffalodebile]

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]

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]

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

[onurozer]

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]

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]

• 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]

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

[sprite2005]

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]

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]

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]

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]

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

[bradlc]

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]

Thank you all so much! Super appreciated ❤️

[stephenbiggs]

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

[BobWalsh]

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]

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]

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