VS Code中如何实现鼠标悬停预览CSS变量值？

VS Code原生对CSS变量的悬停支持默认只展示变量定义的文件位置，不会直接输出变量对应的值、也没有颜色类变量的可视化预览，和Tailwind CSS IntelliSense的交互效果差距很大，以下是实测可用的实现方案：

方案1：安装CSS Variable Autocomplete扩展（效果最匹配需求） #

这是目前和Tailwind悬停预览还原度最高的方案，安装后零配置即可生效：

• 直接在扩展商店搜索安装CSS Variable Autocomplete
• 支持自动扫描项目内所有全局、局部样式文件里定义的CSS变量，悬停在var(--xxx)格式的变量上时，会直接在弹窗里展示变量的实际计算值
• 针对颜色、长度、阴影类的CSS变量，会直接在悬停弹窗里渲染可视化预览块，和Tailwind扩展的预览交互完全一致
• 原生支持SCSS、LESS、PostCSS，以及Vue、React、Svelte等框架单文件组件内的样式块识别

如果你的CSS变量定义在第三方引入的样式文件中，只需要在扩展设置里把对应文件路径加入扫描目录即可。

方案2：CSS Peek + VS Code原生配置（轻量无冗余功能） #

如果你不想装功能太多的扩展，可以用这个组合方案：

1. 安装CSS Peek扩展，打开VS Code设置找到CSS Peek: Hover项，将值修改为show definition and preview
2. 在VS Code的settings.json中添加以下配置，开启内置的样式悬停支持和颜色装饰器：

"css.hover": true,
"scss.hover": true,
"less.hover": true,
"css.colorDecorators.enable": true

这个方案的缺点是预览样式比较朴素，不会像Tailwind或者方案1那样渲染可视化的颜色/样式块，只会以文本形式展示变量值。

方案3：复用已安装的Tailwind CSS IntelliSense能力 #

如果你本地已经装了Tailwind CSS IntelliSense扩展，不需要额外安装其他工具，只要修改Tailwind配置把自定义CSS变量纳入扩展的扫描范围即可：
在项目根目录的tailwind.config.js中，把你定义的CSS变量映射到Tailwind的主题配置里，比如：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 保留原有其他配置
  theme: {
    extend: {
      colors: {
        primary: 'var(--theme-primary)',
        success: 'var(--theme-success)',
        // 其余颜色类变量按相同格式添加
      },
      spacing: {
        'page-gap': 'var(--layout-page-gap)'
        // 其余尺寸类变量按相同格式添加
      }
    }
  }
}

配置完成后执行「Developer: Reload Window」命令重载VS Code，之后悬停在对应CSS变量上时，就会直接触发Tailwind扩展自带的预览效果。

内容的提问来源于stack exchange，提问作者Liron