Tailwind 的 content 配置必须精确匹配模板路径，否则未扫描到的类名不会编译进 CSS；应使用 './src/*/.{js,ts,jsx,tsx,vue}' 等显式扩展名，确保 Vue3+TS 项目中 .vue 模板和 .ts 中 JSX 被正确识别。

tailwind.config.js 的 content 配置必须精确匹配模板路径

Tailwind 不是运行时框架，它靠扫描源码中出现的类名来生成最终 CSS。如果 content 数组漏掉某个目录或文件类型，对应类名就完全不会被编译进去——页面上写 bg-indigo-600 也没用，连报错都不会有。

• 常见错误：写成 ./src/**/*，但实际项目里 Vue 单文件组件的 <template> 或 JSX 在 .ts 文件里，而默认 glob 不匹配 .ts
• 正确写法示例：['./src/**/*.{js,ts,jsx,tsx,vue}', './index.html']
• Vue3 + TS 项目尤其注意：.vue 文件里的 <template> 内容必须被扫描到，否则响应式类如 md:flex 会失效
• 开发阶段可临时加 process.env.NODE_ENV === 'development' && './dev-test/**/*' 方便快速验证新类名

别在 HTML 里手写长串 class，用 Headwind 自动排序

一个按钮写成 class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50" 是典型反模式：顺序混乱、难维护、合并冲突高。Tailwind 类名本身有隐含优先级（比如 hover: 必须在最后），手动排列极易出错。

• 安装 Headwind 插件后，保存时自动按预设规则重排：响应式前缀 → 布局 → 盒模型 → 文本 → 颜色 → 状态变体
• VS Code 中配置 headwind.classRegex 支持 className（React）和 class（Vue/HTML）双语法
• 排序后变成：class="font-medium px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 transition-colors"，一眼看出结构层次

用 @layer 自定义基类，而不是重复堆砌 utility

当某组工具类频繁共现（比如卡片容器），硬编码 rounded-xl border border-gray-200 bg-white p-6 shadow-sm 十次，就埋下十处维护雷。Tailwind 提供 @layer 机制，在 CSS 文件里安全封装语义化基类。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 在 src/style.css 里写：

  @layer components { .card { @apply rounded-xl border border-gray-200 bg-white p-6 shadow-sm; } }

• HTML 中直接用 <div class="card">，后续改圆角只需改一处 @apply
• 注意：自定义类名不能和现有工具类同名（如 .flex），否则会覆盖原意；命名建议带业务前缀（.user-card）
• 不要滥用：仅当复用频次 ≥3 且结构稳定时才封装，否则反而增加认知负担

Vite + JIT 模式下，删掉没用的类名能立刻减小 CSS 体积

Tailwind v3 默认启用 JIT 编译器，但它只在构建时生效。开发阶段你写的每个类名都会实时注入 CSS，所以 text-9xl 这种极少用的类也占内存——不是 bug，是设计使然。

立即学习“前端免费学习笔记（深入）”；

• 检查是否启用了 JIT：确认 tailwind.config.js 中没有 mode: 'aot'；Vite 项目默认就是 JIT
• 构建产物体积异常大？运行 npx tailwindcss -o ./dist/tailwind.css --minify 手动触发一次精简编译，对比输出
• 真正省体积的关键在 content 配置：如果误配了 node_modules/**/*，JIT 也会扫描那些库里的字符串，把根本不用的类全编进去

Tailwind 效率提升的核心不在“写得快”，而在“改得准”——所有优化都围绕减少样式与结构的耦合、压缩上下文切换成本展开。最容易被忽略的是 content 配置的精度和 @layer 封装的边界感，这两处一旦失控，效率优势会迅速逆转为调试黑洞。