tailwind css v3 移除冗余类并重命名冲突类，transform/filter/backdrop-filter 类废弃，overflow-clip/ellipsis 改为 text-clip/text-ellipsis，bg-opacity 推荐用 bg-black/50，flex-grow/shrink 缩写为 grow/shrink，生产构建后才暴露缺失类问题。
Tailwind CSS v3 并没有“随机删除”类名，而是移除了 JIT 模式下已无实际作用的冗余类，同时重命名了与原生 CSS 属性冲突或语义不清的类。这些变化不是破坏性更新，而是精简和正交化设计的结果——你不需要找“替代类”，很多时候是直接删掉即可。
transform / filter / backdrop-filter 类被移除
这些类在 v3 中完全失效，因为 JIT 模式默认启用所有变换和滤镜能力，无需前置声明。
-
transform：已废弃。所有scale-、rotate-、translate-等类可直接使用，无需包裹transform -
filter和backdrop-filter：同理废弃。blur-、grayscale、backdrop-blur-等类可独立使用 - 错误写法：
class="transform scale-125 filter grayscale" - 正确写法：
class="scale-125 grayscale backdrop-blur-sm"
overflow-clip / overflow-ellipsis 被重命名为 text-* 类
这是为避免与 CSS 原生 overflow 属性混淆。v3 明确将文本截断类归入 text- 命名空间。
-
overflow-clip→text-clip（注意：仅对display: block或inline-block元素生效） -
overflow-ellipsis→text-ellipsis（需配合white-space: nowrap和overflow: hidden） - 不再支持
overflow-ellipsis，ESLint 插件会报错但不自动修复
bg-opacity 不再推荐，改用 bg-color/opacity 语法
v3 引入了更直观的 `/bg-opacity- 类仍存在但被标记为 legacy，未来可能移除。
- 旧写法：
bg-black bg-opacity-50→ 生成两条规则，且bg-opacity-50依赖background-color已设值 - 新写法：
bg-black/50→ 单条规则，直接编译为background-color: rgb(0 0 0 / 0.5) - 兼容性：所有现代浏览器支持，包括 Safari 15.4+；若需支持 Safari ≤15.3，保留旧写法或加 polyfill
flex-grow / flex-shrink 等布局类被缩写为 grow / shrink
这是为了统一前缀逻辑，与 basis、self 等保持一致。
-
flex-grow→grow（等价于flex: 1 1 0%） -
flex-shrink→shrink（等价于flex: 0 1 auto） -
flex-grow-0→grow-0；flex-shrink-0→shrink-0 - 注意：
grow默认包含shrink，如需禁用收缩，必须显式加shrink-0
最易忽略的一点：这些变更不会在开发时（npm run dev）暴露问题，因为 JIT 模式会临时生成所有类；只有构建生产包（npm run build）后，未声明的废弃类才真正消失。别等上线才发现按钮不缩放、文字不截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
