The hover preview and inline color decorators are not working.

[lexman1958]

What version of Tailwind CSS IntelliSense are you using?

V 0.9.10

What version of Tailwind CSS are you using?

V 3.3.0

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: {
         colors: {
            vuejs: {
               100: "#34ebb7",
               900: "#b51b9b",
            },
         },
      },
   },
   plugins: [
      require("@tailwindcss/typography"),
      require("@tailwindcss/container-queries"),
      require("@tailwindcss/forms"),
      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",
   "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,twig",
   "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,
   "path-autocomplete.extensionOnImport": true,
   "php.format.rules.indentBraces": true,
   "editor.indentSize": "tabSize",
   "phpfmt.psr1_naming": true,
   "php.problems.exclude": {
      "vendor/": true
   },
   "css.styleSheets": [],
   "easycode.userEmail": "murugappan_rm51@yahoo.com",
   "terminal.integrated.env.windows": {},
   "auto-rename-tag.activationOnLanguage": ["*"],
   "prettier.bracketSameLine": true,
   "prettier.tabWidth": 3,
   "scssFormatter.singleQuote": true,
   "eslint.quiet": true,
   "volar.inlayHints.eventArgumentInInlineHandlers": false,
   "volar.inlayHints.missingRequiredProps": false
}

Reproduction URL/HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link
         href="//db.onlinewebfonts.com/c/aae462773966100890bdfe4a8188cc0a?family=Marker+Felt"
         rel="stylesheet"
         type="text/css" />
      <link rel="stylesheet" href="tailwind.css" />
      <!-- <script src="https://cdn.tailwindcss.com"></script> -->
      <title>Tailwind Course</title>
   </head>
   <body>
      <h1 class="border-4 border-green-600">Hello World</h1>
      <h2 class="text-vuejs-100">Hello World</h2>
   </body>
</html>

Describe your issue The hover preview and inline color decorators are not working. Has the bug reported under #728 has resurfaced?

[bradlc]

Hey @lexman1958, thanks for reporting this. Should be fixed in v0.9.11 👍

[lexman1958]

Hi @bradlc

Just tested and it works fine now. Thank you so much. Please close this issue.

[andzejsp]

it stopped working for me, using volar, prettier. it was working when i first set it up, but after a week or so it stopped. How can i fix this?

[ojvribeiro]

It stopped working for me as well. I'm also using Volar and Prettier, but it seems Volar is the cause. The decorator shows in a JSX file, but not in a Vue file.