vue3 not provide suggestions.

[ccljmcc]

What version of VS Code are you using?

For example: v1.79.0

What version of Tailwind CSS IntelliSense are you using?

For example: v0.9.11

What version of Tailwind CSS are you using?

For example: v3.3.2

What package manager are you using?

For example: yarn

What operating system are you using?

For example: macOS

Tailwind config

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [],
  corePlugins: {
    preflight: false
  }
}

VS Code settings

{
    // 图标
    "workbench.iconTheme": "vscode-icons",
    // less设置
    "less.compile": {
        "compress": true, //是否压缩
        "sourceMap": false, //是否生成map文件，有了这个可以在调试台看到less行数
        "out": false, // 是否输出css文件，false为不输出
        "outExt": ".css", // 输出文件的后缀,小程序可以写'wxss'
    },
    /** Easy Sass 插件 **/
    "easysass.formats": [
        {
            "format": "compressed", // 压缩
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css",
    // git设置
    "git.autofetch": true,
    "git.ignoreWindowsGit27Warning": true,
    // python
    "python.languageServer": "Default", // 定义语言服务器的类型
    "python.linting.flake8Enabled": true,
    "python.formatting.yapfArgs": [
        "--style",
        "{based_on_style: chromium, indent_width: 4}"
    ],
    "python.linting.flake8Args": [
        "--max-line-length=120"
    ],
    "python.linting.pylintEnabled": false,
    "[python]": {
        "editor.defaultFormatter": "ms-python.python",
        "editor.formatOnType": true
    },
    "python.autoComplete.addBrackets": true,
    "python.formatting.provider": "yapf",
    "code-runner.runInTerminal": true,
    // 一些设置
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.tabSize": 2,
    "editor.suggestSelection": "first",
    "cSpell.userWords": [
        "datagrid",
        "depts",
        "PSSHOP",
        "vant",
        "vuex"
    ],
    // vscode 背景图
    "background.useFront": false,
    // "background.useDefault": false,
    // "background.customImages": [
    //     "https://i0.hdslb.com/bfs/article/5091551f703d62896f0eee67196db900948a1992.jpg@942w_1395h_progressive.webp"
    // ],
    // "background.style": {
    //     "content": "''",
    //     "pointer-events": "none",
    //     "position": "absolute",
    //     "width": "100%",
    //     "height": "100%",
    //     "z-index": "9",
    //     "background.repeat": "no-repeat",
    //     "background-size": "30% ,50%",
    //     "opacity": 0.2
    // },
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.maxTokenizationLineLength": 1000000000000000000,
  
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "python.analysis.completeFunctionParens": true,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[less]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "files.associations": {
        "*.css": "tailwindcss"
    },
    "editor.quickSuggestions": {
        "strings": "on"
    },
    "tailwindCSS.emmetCompletions": true,

    "prettier.useEditorConfig": false,
    "eslint.enable": false,
    "turboConsoleLog.quote": "'",
    // Vetur can't find tsconfig.json, jsconfig.json in /xxxx/xxxxxx.
    "vetur.ignoreProjectWarning": true,
    "dotLog.config": [
        {
            "trigger": "log",
            "description": "quick console.log result",
            "format": "console.log",
            "prefix": "🚀~"
        },
        {
            "trigger": "clg",
            "description": "quick console.log result",
            "format": "console.log",
            "prefix": "🚀~"
        },
        {
            "trigger": "cwa",
            "description": "quick console.warn result",
            "format": "console.warn",
            "prefix": "🚀~"
        },
        {
            "trigger": "cer",
            "description": "quick console.err result",
            "format": "console.error",
            "prefix": "🚀~"
        }
    ],
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "dart.debugExternalPackageLibraries": false,
    "dart.debugSdkLibraries": false,
    "debug.onTaskErrors": "debugAnyway",
    "vue.features.codeActions.savingTimeLimit": 600,
    "update.showReleaseNotes": false,
    "workbench.colorTheme": "Default Dark+",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "liveServer.settings.donotShowInfoMsg": true,
}

Describe your issue

I am using vite+vue3, and if the <script> tag is at the top and the tag is in the middle of the .vue file, it will cause Tailwind CSS IntelliSense to not provide suggestions.

[thecrypticace]

This is caused by the space in the closing script tag which isn't valid HTML — thus treating the script tag as unclosed: </script >.

It seems that the Vue SFC compiler isn't bothered by this though.

cc @bradlc Thoughts on what we should do here?

[thecrypticace]

Here's a minimal repro of the issue:

<script></script >
<template><span class="underline"></span></template>

[bradlc]

I think it makes sense to fix this if it's valid in Vue. The fix will be available in the next release 👍