应使用 @layer utilities 定义自定义工具类，而非 @apply；需手写标准 css 属性、显式写全厂商前缀、确保类名在模板中显式出现以避免 purgecss 误删。
直接在 CSS 文件里用 @layer utilities 写，别用 @apply 拼凑——后者只适合组合已有工具类，不能定义新属性。
@layer utilities 是唯一安全的自定义工具类入口
Tailwind 的构建流程会把 @layer utilities 中的规则注入到最终 CSS 的 utilities 层级，确保它们能被 PurgeCSS 正确识别、不被误删，且优先级高于基础重置但低于用户手动写的 !important 类。
- 写在
@tailwind utilities之后才生效；写在它之前会被忽略 - 不能嵌套伪类（如
&:hover），必须显式写出完整选择器：.text-shadow-sm而非&.text-shadow-sm - 避免用
@layer base或@layer components定义工具类——它们不参与 PurgeCSS 扫描，上线后可能消失
自定义工具类必须用标准 CSS 属性，不能依赖 @apply
@apply 只能引用已存在的 Tailwind 工具类（比如 bg-blue-500、px-4），没法引入原生 CSS 属性（如 backdrop-filter、aspect-ratio）。要加这些，必须手写声明。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 错误写法：
.blur-bg { @apply backdrop-blur-sm }——backdrop-blur-sm不是默认工具类，@apply会报错或静默失败 - 正确写法：
.blur-bg { backdrop-filter: blur(4px); }，放在@layer utilities块内 - 需要响应式？加前缀：
.sm\:blur-bg { @media (min-width: 640px) { backdrop-filter: blur(4px); } }，或直接用@layer utilities { @variants responsive { .blur-bg { ... } } }（需启用插件）
命名冲突和 PurgeCSS 误删风险
Tailwind 默认只保留 HTML 中实际出现的 class 名。如果你的自定义工具类名没在模板里显式写出来（比如靠 JS 动态拼接），PurgeCSS 就会把它干掉。
- 避免用动态生成的类名，例如
text-color-${theme}—— 这种不会被扫描到 - 确保类名出现在 JSX/HTML 字符串中：
className="text-shadow-lg"，而不是className={`${base} ${shadow}`} - 如果真要动态，得在
content配置里显式声明匹配模式，比如./src/**/*.{js,ts,jsx,tsx}+ 正则提示，但不如直接写死稳妥
最易被忽略的一点：自定义工具类一旦含 vendor prefix（如 -webkit-line-clamp），必须连同标准属性一起声明，否则 Safari 或旧版 Chrome 会失效；而且 @layer utilities 不会自动补前缀，得自己写全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
