Intellisense VsCode extension suggestions no working

[DaviMarra]

What version of VS Code are you using? 1.83.1 (Universal)

What version of Tailwind CSS IntelliSense are you using?

v0.10.1

What version of Tailwind CSS are you using?

3.3.5

What package manager are you using?

I've tried npx and npm neither worked. Let's say I'd use npm

What operating system are you using?

macOS Tailwind config

tailwind.config = { theme: { extend: { colors: { clifford: '#da373d', primary: "#091b51" } } } }

VS Code settings

{ "tailwindCSS.includeLanguages": { "html": "html", "javascript": "javascript", "css": "css" }, "editor.quickSuggestions": { "strings": "on" }, "css.validate": false, "editor.inlineSuggest.enabled": true,

}

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

Describe your issue

For some reason the Tailwind Intellisense VScode extension is not working for me. Any time I try to use the autocomplete or the suggestion, nothing happens, there are no suggestions for class names and anything else at all. I've already followed the instructions in the read.me and also in the extension description on vscode marketplace and still things are not working. I'm trying to play with the CDN for now, but still, things should work right? Here's a quick loom video showcasing the issue. https://www.loom.com/share/46623ee93b164dcfbb46aa8d59dddbe9

[thecrypticace]

The intellisense extension requires you to have a local tailwind.config.js file for completions to work. In most cases you can create an empty file and completions will start working.

However, that it will not pick up customizations set using tailwind.config = {} in your HTML. You must put the customizations in the config file for the Intellisense extension to pick them up.

The best way to share the configs between the config file and the CDN config is use the config file, make sure it's an ES module, and load it in the browser via import like so:

tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        clifford: '#da373d',
        primary: "#091b51"
      },
    },
  },
};

And in your HTML:

<script type="module">
  import config from "./tailwind.config.js"
  window.tailwind.config = config
</script>

[DaviMarra]

Yes I know that, I already had an tailwind.config.js file and I had a script in my html to link to it. I've changed the script I had to this you sent:

and still isn't working.

Please, open the issue again. the issue has not been solved.

On Tue, Oct 31, 2023 at 6:07 PM Jordan Pittman @.***> wrote:

Closed #875 https://github.com/tailwindlabs/tailwindcss-intellisense/issues/875 as completed.

— Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/tailwindcss-intellisense/issues/875#event-10826014451, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASLQLQKMFCSNPWIYBFDQ3LLYCFSCDAVCNFSM6AAAAAA6YKQUMGVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJQHAZDMMBRGQ2DKMI . You are receiving this because you authored the thread.Message ID: <tailwindlabs/tailwindcss-intellisense/issue/875/issue_event/10826014451@ github.com>

[thecrypticace]

@DaviMarra Please provide a reproduction of the repo you are using.

[DaviMarra]

tailwind project.zip here's a zip file, it's easier since it's just a test project

[thecrypticace]

You MUST use the export default syntax for this to work with intellisense AND the CDN.

Replace your config file with this:

export default {
  theme: {
    extend: {
      colors: {
        clifford: "#da373d",
        primary: "#091b51",
      },
    },
  },
};

[DaviMarra]

Ah ok, now I got it. Thank you. It worked!

[thecrypticace]

happy to help!