这里只列出 unocss 的可实现类名，tailwindcss 可以拿去试试用
1. 父元素移入，子元素改样式
<!-- 必须是 group 类名 -->
<div class="group"><div class="group-hover:color-red">Text</div>
</div>
2. 按钮反色移入
<divclass="size-min bg-gradient-to-r from-blue from-50% to-red to-50% bg-[size:200%] bg-[100%] hover:bg-[0%] transition-all duration-1000"><button class="w-100 h-10 z-1 color-transparent bg-clip-text bg-gradient-to-r from-red from-50% to-blue to-50% bg-[size:200%] bg-[100%] hover:bg-[0%] transition-all duration-1000">A Button</button>
</div>
3. background-image、background-size、background-position
<div class="bg-[url(xx.png)] bg-[size:10%] bg-[position:10%]"></div>
4. 渐变色背景
<div class="bg-gradient-to-br from-red via-green to-blue from-10% via-10% to-20%"></div>
5. 声明变量
<div class="[--color:theme(colors.red.500)] [--bg:red] bg-[--bg] color-[--color]"></div>
6. 伪类元素
<div class="before:content-[''] before:block before:size-3 before:bg-red"></div>
7. 占位符
<div class="placeholder:color-red"></div>
8. 响应式
<div class="sm-<md:w-full"></div>
9. 包含属性样式（disabled, read-only, checked …等等）
<div class="disabled:opacity-30 read-only:bg-gray-100 checked:ring-1 required:border-1"></div>
10. data属性样式（data-hidden …类似）
<div class="data-[hidden]:hidden"></div>
更多样式请参考 unocss
)
