Description
What version of VS Code are you using?
v1.79.1
What version of Tailwind CSS IntelliSense are you using?
v0.9.11
What version of Tailwind CSS are you using?
v3.3.2
What package manager are you using?
npm
What operating system are you using?
macOS
Tailwind config
/** @type {import('tailwindcss').Config}*/
const config = {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
extend: {},
},
plugins: [],
};
module.exports = config;
VS Code settings
{
"[markdown]": {
"editor.quickSuggestions": {
"comments": "on",
"strings": "on",
"other": "on"
}
},
"eslint.options": {
"extensions": [".js", ".jsx", ".mdx", ".ts", ".tsx"]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"svelte",
"mdx"
],
"eslint.runtime": "node",
"eslint.execArgv": ["--max_old_space_size=8192"],
"editor.fontSize": 17,
"editor.fontFamily": "'Victor Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace",
"editor.tabSize": 2,
"editor.fontLigatures": true,
"editor.fontWeight": "700",
"editor.letterSpacing": 0.5,
"workbench.colorTheme": "Boxy Ocean (dimmed bg)",
"terminal.integrated.shell.osx": "/bin/zsh",
"editor.renderWhitespace": "selection",
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
// all comment types
"comment",
// true, false, null
"constant.language",
// import, from, export, default, return, if, for, break, continue, try, catch, finally,
// throw, default, yield, await
"keyword.control",
// in, void, delete, instanceof
"keyword.operator.expression",
// debugger
"keyword.other",
// new
"keyword.operator.new",
// super, this, arguments
"variable.language",
// attributes in html, jsx, etc.
"entity.other.attribute-name",
// static, extends, async, private, public, implements
// constructor, const, let, var, enum, class, function, interface
// no explicit scopes for constructor, const, let, var
// also no explicit scope for function without the arrow
// therefore we enable all storage and explictly exclude the arrow in another scope
"storage"
// // no explicit scope for the eval keyword yet
// // can be targeted with the scope below, but scope is too broad
// "support.function",
// // no explicit scope for the package keyword yet
// // can be targeted with the scope below, but scope is too broad
// "variable.other.readwrite",
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
//following will be excluded from italics (VSCode has some defaults for italics)
"invalid",
"keyword.operator",
"constant.numeric.css",
"keyword.other.unit.px.css",
"constant.numeric.decimal.js",
"constant.numeric.json",
"storage.type.function.arrow",
"variable",
"entity"
],
"settings": {
"fontStyle": ""
}
}
]
},
"explorer.sortOrder": "type",
"workbench.fontAliasing": "antialiased",
"new-fractal-folder.configFileFormat": "yml",
"new-fractal-folder.customExtensions": "scss",
"new-fractal-folder.fractalFileFormat": "twig",
"new-fractal-folder.readmeFile": true,
"colorize.languages": ["typescript", "javascript"],
"php.suggest.basic": false,
"files.associations": {
"*.inc": "php"
},
"markdownlint.config": {
"MD033": false
},
"scss.validate": false,
"css.validate": false,
"redhat.telemetry.enabled": false,
"editor.bracketPairColorization.enabled": true,
"twigcs.executablePath": "/Users/michaelwarner/.composer/vendor/friendsoftwig/twigcs/bin/twigcs",
"twigcs.rulesetClass": "FriendsOfTwig\\Twigcs\\Ruleset\\Custom",
"markdown.extension.italic.indicator": "_",
"tailwindCSS.experimental.classRegex": [
// so we can put `/* tw */ ` in front of a JS/TS string and get Tailwind Intellisense in custom spots
"/\\* tw \\*/ '([^']*)",
"/\\* tw \\*/ `([^`]*)",
"/\\* tw \\*/ \"([^\"]*)",
// these must go directly before a `{` (w/ space in between) and apply to strings until it hits a semi-colon (good for JS/TS if using semi-colons)
["/\\* tw \\*/ {([^;]*);", "'([^']*)'"],
["/\\* tw \\*/ {([^;]*);", "`([^']*)`"],
["/\\* tw \\*/ {([^;]*);", "\"([^\"]*)\""],
// for Twig: these apply to strings until it hits a `}`
["{# tw #} ([^}]*)}", "'([^']*)'"],
["{# tw #} ([^}]*)}", "\"([^\"]*)\""]
],
"explorer.confirmUndo": "verbose",
"emmet.includeLanguages": {
"twig": "html"
},
"mdx.experimentalLanguageServer": true,
"diffEditor.ignoreTrimWhitespace": false,
"json.schemas": [],
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"svelte.enable-ts-plugin": true,
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
},
}
Reproduction URL
https://github.com/MichaelAllenWarner/sveltekit-tw-intellisense-demo
(I've included a setting in my .vscode/settings.json
file that I think will make my experimental class-regex work for you if you view /src/routes/+page.svelte
in VS Code, but I've also included my global VS Code settings above as requested.)
Describe your issue
In the <script>
part of a Svelte file, my experimental class-regex setting seems to be working in all ways except for the tooltips that should appear on hover. You can see in this video clip that I get autocomplete functionality and the little color-square for color-related classes, but no hover-tooltip: