@apply指令不生效必须显式启用transformerdirectives，因其属unocss的transformer功能而非preset自带能力，需在uno.config.ts中import并注册，且仅支持.css文件或块内使用。
@apply 指令不生效？必须显式启用 transformerDirectives
UnoCSS 默认完全忽略 @apply，哪怕你写了 .btn { @apply px-4 py-2 bg-blue-500; }，它也不会解析、不会报错、也不会生成对应 CSS —— 最终就是样式丢失。
根本原因是 @apply 属于 UnoCSS 的 transformer 功能，不是 preset 自带能力。你得手动引入并注册：
-
import { transformerDirectives } from 'unocss'（注意不是从'unocss/transformerDirectives'） - 在
uno.config.ts的transformers数组中加入transformerDirectives() - 仅支持出现在
.css文件或<style></style>块内，<template></template>中写@apply无效
快捷类名（shortcuts）必须定义在 uno.config.ts，不能写在 .css 里
很多人把 shortcuts 写进 src/style.css 或 main.css，比如：.btn-primary { @apply px-4 py-2 bg-indigo-600 text-white rounded; } —— 这样 UnoCSS 完全看不到，编译时不会生成任何规则。
正确位置只有一处：uno.config.ts 的顶层 shortcuts 字段：
export default defineConfig({
shortcuts: [
['btn-primary', 'px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700'],
['card', 'border border-gray-200 p-6 rounded-lg shadow-sm']
]
})
注意：数组形式支持动态逻辑，对象形式（{ btn: '...' }）也合法，但二者不可混用；别漏掉 export default，否则配置不加载。
预设指令（如 attributify、icons）需独立启用，且有加载顺序要求
像 presetAttributify（支持 bg="blue-500" text="sm" 这种属性写法）或 presetIcons（支持 i-mdi-home 标签），不是装了包就自动可用。
- 必须在
uno.config.ts的presets数组中显式调用，例如presets: [presetUno(), presetAttributify()] -
presetAttributify和transformerDirectives可共存，但前者作用于 HTML 属性，后者作用于 CSS 块，互不干扰 - 如果同时用
presetIcons和presetTagify，后者必须放在presets末尾，否则自定义图标标签（如<mdi-home></mdi-home>）无法被 extractor 正确识别
virtual:uno.css 必须在 main.ts 中 import，且顺序不能错
UnoCSS 不会自动注入样式，import 'virtual:uno.css' 是唯一生效入口。常见错误包括：
- 漏写这行，或写在
import './style.css'之后 —— 导致自定义 CSS 覆盖原子类 - 写在
createApp(App).mount('#app')之后 —— Vue 组件首次渲染时样式未就绪，可能闪动或失效 - 在 Vite + Vue 项目中，若用了
@unocss/reset，应按此顺序：import '@unocss/reset/tailwind.css'→import './style.css'→import 'virtual:uno.css'
最易被忽略的一点：Vite 的 HMR（热更新）对 virtual:uno.css 不敏感——改了 shortcuts 或 rules 后，必须手动刷新浏览器，否则新类名不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
