Tailwind CSS IntelliSense 不提示自定义类名的根本原因是插件仅扫描 tailwind.config.js 中 content 路径下包含实际类名字符串的文件，不解析变量拼接、运行时生成或未被引用的 @layer/插件类。
为什么 Tailwind CSS IntelliSense 不提示自定义类名
根本原因是插件默认只扫描 tailwind.config.js 中声明的 content 路径，且要求这些路径里的文件必须包含「实际使用的类名字符串」（不是变量拼接、不是运行时生成）。如果你把类名写在 JS 变量里、用模板字符串拼接、或放在外部 JSON 文件中，IntelliSense 就看不到。
常见错误现象：bg-primary、text-brand-500 这类自定义颜色/间距类完全不提示；@apply 里写自定义类也没补全；但原生 flex、px-4 等正常。
- 确认
tailwind.config.js的content数组已包含所有含类名的源码路径，例如：["./src/**/*.{js,jsx,ts,tsx,html}"] - 避免在 JS 中用
className={\`bg-\${theme}\`}这类动态拼接——IntelliSense 解析不了运行时逻辑 - 如果用了
layer或plugin注入的类（比如@layer utilities），确保配置里启用了experimental.classRegex或改用addUtilities显式注册
如何让 IntelliSense 识别 @layer 和插件新增的类
默认情况下，IntelliSense 不解析 @layer 块或第三方插件（如 @tailwindcss/aspect-ratio）注入的类，除非你显式告诉它这些类存在。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的theme.extend或plugins中定义的类，只要被content路径里的文件“引用过”，就能被识别；没被引用=不提示 - 对
@layer utilities，需在配置中加experimental.classRegex，例如：classRegex: [/^bg-([a-z]+)/]（慎用，易误匹配） - 更可靠的做法：在某个常驻文件（如
src/tailwind-intellisense-hint.css）里写一句注释式引用：/* bg-primary text-brand-500 */，然后把这个文件加进content
VSCode 插件本身要开哪些设置
插件 bradlc.vscode-tailwindcss 默认开启大部分功能，但几个关键开关容易被忽略。
- 确保 VSCode 设置里启用了
"tailwindCSS.includeLanguages": {"plaintext": "html"}（否则 .md、.astro 文件不生效） - 关闭
"tailwindCSS.showFullFilePath"（设为false），避免路径太长遮挡提示项 - 如果项目有多个
tailwind.config.js（如子包），确认工作区根目录下有且仅有一个，或用"tailwindCSS.files"指定具体路径 - 遇到提示延迟，可调大
"tailwindCSS.validate.tailwindcssVersion"（如设为"3.4.3"），避免版本探测卡住
重启和验证是否生效的硬核操作
改完配置不重启 = 白改。VSCode 的 Tailwind 语言服务是独立进程，缓存强，靠重开文件或刷新编辑器不够。
- 按
Ctrl+Shift+P（macOS 是Cmd+Shift+P），输入Developer: Reload Window强制重载整个窗口 - 打开一个 HTML 或 JSX 文件，在 class 属性里输入
bg-，看是否立刻弹出自定义色值（如bg-primary） - 如果还是不提示，打开命令面板执行
Tailwind CSS: Show Output，检查日志里有没有Content paths scanned:行，确认你写的路径真被读进去了 - 最后手段：删掉
.vscode/tailwindcss缓存目录（如果有），再重载
最常被忽略的是 content 路径没覆盖到实际写类名的文件，或者用了动态字符串拼接——这两点卡住，其他配置全白搭。
