Unocss 类名基操, tailwindcss 类名

这里只列出 unocss 的可实现类名,tailwindcss 可以拿去试试用

1. 父元素移入,子元素改样式

html 复制代码
<!-- 必须是 group 类名 -->
<div class="group">
	<div class="group-hover:color-red">Text</div>
</div>

2. 按钮反色移入

html 复制代码
 <div
    class="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

html 复制代码
<div class="bg-[url(xx.png)] bg-[size:10%] bg-[position:10%]"></div>

4. 渐变色背景

html 复制代码
<div class="bg-gradient-to-br from-red via-green to-blue from-10% via-10% to-20%"></div>

5. 声明变量

html 复制代码
<div class="[--color:theme(colors.red.500)] [--bg:red] bg-[--bg] color-[--color]"></div>

6. 伪类元素

html 复制代码
<div class="before:content-[''] before:block before:size-3 before:bg-red"></div>

7. 占位符

html 复制代码
<div class="placeholder:color-red"></div>

8. 响应式

html 复制代码
<div class="sm-<md:w-full"></div>

9. 包含属性样式(disabled, read-only, checked ...等等)

html 复制代码
<div class="disabled:opacity-30 read-only:bg-gray-100 checked:ring-1 required:border-1"></div>

10. data属性样式(data-hidden ...类似)

html 复制代码
<div class="data-[hidden]:hidden"></div>

更多样式请参考 unocss

相关推荐
晴殇i1 小时前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
Hilaku2 小时前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
旷世奇才李先生3 小时前
CSS 安装使用教程
前端·css
遗憾随她而去.3 小时前
深入理解CSS中的BFC 与IFC , 布局的两大基础概念
前端·css
sunbyte5 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
LeQi6 小时前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
LuckySusu6 小时前
【CSS篇】对position: sticky定位的深入理解
前端·css
LuckySusu7 小时前
【CSS篇】什么是 Margin 重叠问题?如何解决?
前端·css
LuckySusu7 小时前
【CSS篇】元素的层叠顺序(Stacking Order)详解
前端·css