'Tailwinds Intellisense not working when utilizing Next.js & vscode;

Link to Github Issues: click here
At this link you can have the reproduction link;

Some info:

Using Tailwindcss-intellisense version: 0.7.6;

Using Tailwindcss version: 3.0.16

Package manager: NPM;

OS: Pop_os (Linux);


After the latest updates of Tailwind, I don't receive any of the suggestions when trying to add className to elements, I've tried to update the tailwinds files, changed the project, rolled back to previous projects and in any of these cases the autocompletion doesn't seem to work.

ctrl + space returns "No suggestions";

This is the output of the intellisense:

Output

Tried rollback some versions of the tailwind Intellisense, didn't work too. The versions that I've tried: (0.7.6, 0.7.5, 0.7.4, 0.7.3)

my settings.json:

{
    "vsicons.dontShowNewVersionMessage": false,
    "css.validate": false, // Disable css built-in lint
    "stylelint.enable": true, // Enable sytlelint
    "scss.validate": false, // Disable scss lint (optional if using scss)
    
    "tailwindCSS.includeLanguages": {
        "plaintext": "javascript"
    },
      
    "editor.suggestSelection": "first",
    "diffEditor.ignoreTrimWhitespace": true,
    "git.autofetch": true,
    "editor.fontSize": 14,
    "editor.fontFamily": "Fira Code, regular, monospace",
    "editor.fontLigatures": true,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[handlebars]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.colorCustomizations": {
        "statusBar.background": "#7d58c2",
        "statusBar.noFolderBackground": "#492985",
        "statusBar.debuggingBackground": "#5900ff"
    },
    "liveServer.settings.donotVerifyTags": true,
    "editor.inlineSuggest.enabled": true,
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "phase",
    "editor.cursorSmoothCaretAnimation": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.smoothScrolling": true,
    "files.autoSave": "onFocusChange",
    "github.copilot.enable": {
        "*": true,
        "yaml": false,
        "plaintext": false,
        "markdown": true
    },
    "git.ignoreRebaseWarning": true,
    "workbench.iconTheme": "vscode-icons",
    "keyboard.layout": "br",
    "editor.quickSuggestions": {
        "strings": true
    },
    "workbench.colorTheme": "Horizon Contrast (rainglow)",
    "editor.minimap.enabled": false,
    "tailwindCSS.classAttributes": [
        "class",
        "className"
    ],
    "tailwindCSS.emmetCompletions": true,
}


Solution 1:[1]

Solved!

The problem was my folder system;

That's the root of my project's folder: snowsr/home/[new]Workspaces/Web/

The problem was solved by removing the [new] from the folder name.

Still doesn't know why, but this was conflicting with tailwind intellisense, and the intellisense really just not tell me about it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sr. das Neves