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></template>或 JSX 在.ts文件里，而默认 glob 不匹配.ts - 正确写法示例：
['./src/**/*.{js,ts,jsx,tsx,vue}', './index.html'] - Vue3 + TS 项目尤其注意：
.vue文件里的<template></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: 必须在最后），手动排列极易出错。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 安装
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 文件里安全封装语义化基类。
- 在
src/style.css里写：@layer components { .card { @apply rounded-xl border border-gray-200 bg-white p-6 shadow-sm; } } - HTML 中直接用
<div class="card">，后续改圆角只需改一处 <code>@apply - 注意：自定义类名不能和现有工具类同名（如
.flex），否则会覆盖原意；命名建议带业务前缀（.user-card） - 不要滥用：仅当复用频次 ≥3 且结构稳定时才封装，否则反而增加认知负担
- 检查是否启用了 JIT：确认
tailwind.config.js中没有mode: 'aot'；Vite 项目默认就是 JIT - 构建产物体积异常大？运行
npx tailwindcss -o ./dist/tailwind.css --minify手动触发一次精简编译，对比输出 - 真正省体积的关键在
content配置：如果误配了node_modules/**/*，JIT 也会扫描那些库里的字符串，把根本不用的类全编进去
Vite + JIT 模式下，删掉没用的类名能立刻减小 CSS 体积
Tailwind v3 默认启用 JIT 编译器，但它只在构建时生效。开发阶段你写的每个类名都会实时注入 CSS，所以 text-9xl 这种极少用的类也占内存——不是 bug，是设计使然。
content 配置的精度和 @layer 封装的边界感，这两处一旦失控，效率优势会迅速逆转为调试黑洞。
