tailwind类名在html中不着色是因sublime默认用原生css语法解析器，无法识别bg-blue-500等类名，需安装tailwind css intellisense插件并手动设置html (tailwind)语法；jsx/tsx文件需绑定对应tailwind语法，且tailwind.config.js须置于项目根目录、用module.exports导出、content路径显式包含扩展名。
为什么Tailwind类名在HTML里不着色
不是插件没装，是Sublime默认用原生CSS语法解析器处理HTML中的class属性，它根本不知道bg-blue-500是个合法类名。你看到的灰字，其实是“未识别token”的默认降级渲染。
- 必须安装
Tailwind CSS IntelliSense（作者bradlc），别选sublime-tailwindcss或Tailwind CSS Autocomplete——前者已归档，后者在v4函数式配置下直接崩溃 - 插件不自动激活：打开HTML文件后，右下角点击当前语法名（如
HTML），选Open all with current extension as… → HTML (Tailwind) - 若菜单里没有
HTML (Tailwind)，先装HTML-CSS-Class-Completion插件辅助注册语法作用域
JSX/TSX里className没高亮怎么办
插件默认只对.html文件启用类名解析，.jsx和.tsx文件需手动绑定语法作用域，否则className="flex gap-4"全程灰字。
- 打开一个
.jsx文件，右下角点击语法名→Open all with current extension as… → JavaScript (Tailwind) - 同理，
.tsx文件选TypeScript (Tailwind) - 确认项目根目录存在
tailwind.config.js，且content字段显式包含["./src/**/*.{jsx,tsx}"]，路径不能含../，也不能省略扩展名
PostCSS混写时@apply和theme()全灰
@apply、theme('spacing.4')这类写法属于PostCSS插件语法，原生CSS或HTML语法包完全无法识别，标红或变灰是必然结果。
- 先装
PostCSS插件（hazmi版），让.pcss文件正确高亮；再装Tailwind CSS IntelliSense叠加增强 - 在
.css文件顶部加注释：/* syntax: postcss */，强制切换语法，否则Tailwind插件不启动 - 确保
tailwind.config.js导出用module.exports = { ... }，不用export default——插件不支持ESM，也不读.cjs或.ts后缀
自定义颜色/间距类名不提示也不高亮
插件只读取项目根目录下的tailwind.config.js，且只认module.exports导出格式。放错位置、写错导出方式、或content路径没覆盖模板文件，都会导致自定义类名静默失效。
-
tailwind.config.js必须放在你用subl .打开的那一层目录下，插件不会向上查找 -
content字段必须写成["./src/**/*.{html,js,jsx,ts,tsx}"]，写成["./src/**/*"]等于没配 - 配置里避免
require()或同步文件读取（如fs.readFileSync），加载失败时插件无报错，只会退化为默认类名集
最常被忽略的是content路径的扩展名显式声明和module.exports导出方式——这两处写错，其余全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
