Intellisense in VS Code not showing color and code preview

[lexman1958]

What version of Tailwind CSS IntelliSense are you using?

V 0.9.7

What version of Tailwind CSS are you using?

V 3.2.7

What package manager are you using?

Standalone CLI

What operating system are you using?

Windows 10

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./*.html",
        "./public/**/*.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require("@tailwindcss/typography"),
        require("@tailwindcss/container-queries"),
        require("@tailwindcss/forms"),
        require("@tailwindcss/line-clamp"),
        require("@tailwindcss/aspect-ratio"),
    ],
};

VS Code settings

{
    "editor.formatOnSave": true,
    "files.associations": {
        ".htaccess": "htaccess",
        "htaccess": "htaccess"
    },
    "[htaccess]": {
        "editor.formatOnSave": false
    },
    "html.format.indentInnerHtml": true,
    "javascript.format.semicolons": "insert",
    "typescript.format.semicolons": "insert",
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.useInlineCompletions": true,
    "php.validate.executablePath": "",
    "javascript.suggest.completeFunctionCalls": true,
    "workbench.colorTheme": "Monokai Dark Soda",
    "workbench.iconTheme": "material-icon-theme",
    "editor.linkedEditing": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "material-icon-theme.showWelcomeMessage": false,
    "kite.showWelcomeNotificationOnStartup": false,
    "javascript.format.insertSpaceAfterConstructor": true,
    "[php]": {
        "editor.defaultFormatter": "kokororin.vscode-phpfmt"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.minimap.enabled": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "terminal.integrated.sendKeybindingsToShell": true,
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "phpfmt.indent_with_space": 4,
    "open-php-html-js-in-browser.selectedBrowser": "Firefox",
    "eslint.format.enable": true,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "phpfmt.exclude": ["PSR2ModifierVisibilityStaticOrder"],
    "phpfmt.passes": [],
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "workbench.startupEditor": "none",
    "open-in-browser.default": "chrome",
    "splitHTMLAttributes.closingBracketOnNewLine": true,
    "editor.tokenColorCustomizations": {
        "comments": "#ffa500"
    },
    "emmet.includeLanguages": {
        "blade": "html",
        "blade.php": "html",
        "vue": "html",
        "astro": "html",
        "postcss": "css",
        "vue-html": "html",
        "javascript": "javascriptreact",
        "php": "html"
    },
    "emmet.syntaxProfiles": {
        "html": {
            "inline_break": 1
        }
    },
    "editor.wordWrap": "on",
    "vsicons.dontShowNewVersionMessage": true,
    "alpine-intellisense.settings.languageScopes": "html,php",
    "laravel_goto_view.folders": {
        "default": "/resources/views",
        "js": "/resources/js/Pages",
        "vendor": "/resources/views/vendor"
    },
    "laravelGotoView.activateViewAfterCreation": false,
    "laravelGotoView.createViewIfNotFound": false,
    "kite.codefinder.enableLineDecoration": true,
    "liveServer.settings.CustomBrowser": "firefox",
    "tailwindCSS.emmetCompletions": true,
    "prettier.vueIndentScriptAndStyle": true,
    "html-css-class-completion.enableEmmetSupport": true,
    "html-css-class-completion.CSSLanguages": [
        "vue",
        "css",
        "sass",
        "scss",
        "html",
        "php"
    ],

    "css.enabledLanguages": ["tailwind", "html", "php", "vue"],

    "html-css-class-completion.HTMLLanguages": [
        "html",
        "vue",
        "razor",
        "blade",
        "handlebars",
        "twig",
        "django-html",
        "php",
        "markdown",
        "erb",
        "ejs",
        "svelte"
    ],
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "volar.autoCompleteRefs": true,
    "volar.codeLens.scriptSetupTools": true,
    "todo-tree.general.enableFileWatcher": true,
    "todo-tree.general.tags": [
        "BUG",
        "HACK",
        "FIXME",
        "TODO",
        "XXX",
        "[ ]",
        "[x]",
        "BREAK"
    ],
    "editor.formatOnType": true,
    "php.docblock.classSnippet": {
        "@author": "Murugappan",
        "@copyright": "(c) $CURRENT_YEAR"
    },
    "php.docblock.functionSnippet": {
        "@author": "Murugappan",
        "@throws": false
    },
    "rapidapi.terminalLink.enabled": false,
    "tabnine.experimentalAutoImports": true,
    "editor.stickyScroll.enabled": true,
    "postcss.validate": false,
    "color-highlight.languages": ["postcss", "*"],
    "css.lint.unknownAtRules": "ignore",
    "nuxt-vscode.root": "../nuxt-dojo",
    "alignment.indentBase": "activeline",
    "color-highlight.matchRgbWithNoFunction": true,
    "color-highlight.matchWords": true,
    "intelephense.diagnostics.implementationErrors": false,
    "intelephense.diagnostics.languageConstraints": false,
    "volar.completion.preferredAttrNameCase": "auto-camel",
    "emmet.excludeLanguages": [],
    "console-ninja.toolsToEnableSupportAutomaticallyFor": {
        "live-server": true,
        "live-preview": true
    },
    "phpfmt.enable_auto_align": true,
    "phpCreateClass.strictTypes": true,
    "editor.unicodeHighlight.invisibleCharacters": false,
    "reactComponentGenerator.importReact": true,
    "reactComponentGenerator.language": "js",
    "reactComponentGenerator.stylesLanguage": "css",
    "reactComponentGenerator.useIndexFile": false,
    "reactComponentGenerator.createStoriesFile": false,
    "reactComponentGenerator.verboseStoriesComments": false,
    "indentRainbow.indicatorStyle": "light",
    "indentRainbow.lightIndicatorStyleLineWidth": 2,
    "indentRainbow.colors": [
        "rgba(255,255,64,0.07)",
        "rgba(127,255,127,0.07)",
        "rgba(255,127,255,0.07)",
        "rgba(79,236,236,0.07)"
    ],
    "editor.cursorBlinking": "expand",
    "phpfmt.detect_indent": false,
    "prettier.bracketSameLine": true,
    "path-autocomplete.extensionOnImport": true,
    "prettier.tabWidth": 4,
    "php.format.rules.indentBraces": true,
    "editor.indentSize": "tabSize",
    "phpfmt.psr1_naming": true,
    "php.problems.exclude": {
        "vendor/": true
    },
    "css.styleSheets": []
}

Reproduction URL

Reproduction not possible as the problem is VS Code extension in local PC

Describe your issue

(1) When i enter the tailwind classes, previously i could hover and see the underlying css code, now it does not show
(2) When i enter color styling using tailwind css class ("text-green-500"), previously i could the see the color preview not no preview shows. This does not happen to basic css code.

[LordJudge]

I'm facing a similar issue but instead nothing is showing up like autocomplete and colors. it randomly stopped even though I didn't remove anything / change anything.

[lexman1958]

@LordJudge

Same here. Did not do anything but the extension's features stop working just like that.

[bradlc]

Hey @lexman1958. I'm pretty sure this was because we weren't bundling @tailwindcss/container-queries, and this is now fixed in the latest release (v0.9.8). Let me know if you're still having issues though 👍

[lexman1958]

Hey @bradlc

The problem seems to be resolved with Version 0.9.8. Thank you so much. Great Job!

[paulaandrezza]

I had the same problem, in my case, there was a conflict between the extensions. I disabled the vscode-styled-components extension and the color decorators started working again.

[BidyasagarAnupam]

I have the same problem, please help
and I already set the editor.defaultColorDecorators : true

[issam-seghir]

I have the same problem with Version: 0.9.11 of Tailwind CSS IntelliSense and tailwindcss version 3.3.2

[Harmslings]

I have the same problem, please help

[goper-leo]

I have the same problem, in my case change-case extension conflicts with the package. I disabled it and it works fine again.

[cschultzOT]

I have been struggling with this issue in my Nuxt3 Project. I added tailwind.config.js file with the default content from the installation page on tailwindcss.com to my project even though Nuxt3 does not use this but the extension requires it - after adding that file my Tailwind CSS IntelliSense is now working properly. I am still handling all of my theme adjustments in my nuxt.config.ts.

I hope this helps everyone else. Cheers!

[rayasabari]

I have the same issue, the preview color in the class suddenly not showing, currently I am using the tailwindcss-intellisense v0.9.11 and tailwindcss v3.2.1 or v3.2.2

[cschultzOT]

I have the same issue, the preview color in the class suddenly not showing, currently I am using the tailwindcss-intellisense v0.9.11 and tailwindcss v3.2.1 or v3.2.2

@rayasabari Does your project have a tailwind.config.js or tailwind.config.cjs file?