vs code 颜色预览生效需三要素：开启 editor.colordecorators 设置、语言模式为 css/scss/less、使用静态颜色字面量（如 #3b82f6、red、hsl()）；var(--primary)、js 动态值及非 css 模式下均不支持。
VS Code 默认就支持 CSS 颜色预览，但多数人没开对开关，或装了插件却没配对语言模式——结果是写了 #3b82f6 旁边也没小色块。
为什么 #fff 不显示色块？先查 editor.colorDecorators
这个设置项才是颜色预览的总开关，不是插件决定的。它默认开启，但容易被工作区配置覆盖或手动关掉。
- 按
Ctrl+,（Windows/Linux）或Cmd+,（macOS），搜colorDecorators - 确认
Editor > Color Decorators已勾选（对应 JSON 键为"editor.colorDecorators": true） - 如果右上角显示“工作区”，点进去检查
.vscode/settings.json是否有"editor.colorDecorators": false - 改完不用重启，立刻生效；若仍不显示，看右下角语言模式是不是
css、scss或less—— 写在.html的style标签里也行，但纯plaintext或javascript模式下不会触发
var(--primary) 和 rgb(0, 128, 255) 为啥不预览？这是设计限制
VS Code 原生颜色装饰器只处理**静态可解析的颜色字面量**：比如 #000、red、hsl(240, 100%, 50%)。它不执行变量查找、不读取 :root 定义、也不解析 JS 动态值。
-
var(--primary)永远不会出预览——哪怕你在同一文件写了:root { --primary: #3b82f6; } -
rgb()、hsl()在 VS Code 1.84+ 默认支持，但旧版本或某些 SCSS 插件链路断裂时会失效 -
currentColor、transparent、inherit这类语义值，任何插件都渲染不出色块 - 想让
rgb()可见，确保语言模式是css（不是postcss或vue），且没装冲突插件（如老版 CSS IntelliSense）
Tailwind 类名怎么显示色块？靠 Tailwind CSS IntelliSense
原生 CSS 预览不管 bg-blue-500 这种类名，必须用专用插件。官方扩展 Tailwind CSS IntelliSense 是唯一稳定支持色块 + 悬停提示的方案。
- 安装后，在
settings.json中启用："tailwindCSS.colorHints": true - 确保
"editor.quickSuggestions": { "strings": true }，否则 JSX/Vue 模板里不弹建议 - 自定义颜色要进
tailwind.config.js的theme.extend.colors，例如'brand': '#6366f1'，否则bg-brand不会渲染色块 - 任意值语法如
bg-[#6366f1]也能触发预览，但不会出现在补全列表里 - 提示失效时，别重启 VS Code，直接
Ctrl+Shift+P→ 输入Tailwind CSS: Restart Tailwind CSS Server
要不要装 Color Highlight？看场景再决定
它和原生 editor.colorDecorators 不是替代关系，而是补充：前者能高亮 JS 字符串里的颜色、支持更多自定义格式，但代价是可能误标、拖慢大文件编辑。
- 只在 CSS/SCSS 文件里用？不用装，原生够用
- 要在
style={{ backgroundColor: '#3b82f6' }}里也看到色块？得配colorHighlight.languages加javascript，并开colorHighlight.occurrencesInStrings - 发现色块太淡（尤其浅色主题）？调
"colorHighlight.defaultAlpha": 0.3提高透明度 - 装了之后点击色块唤不出调色器？禁用
Color Highlight，原生点击功能只在editor.colorDecorators下有效
最常被忽略的一点：颜色预览是否生效，90% 取决于语言模式识别是否准确。别急着装插件，先盯住右下角那个小标签——它错一次，所有配置都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
