UnoCSS的清晰版Style。

1.宽

格式：w-前缀

• 固定宽度：w-数字
• 百分比宽度：w-full、w-1/2
• 最小/最大宽度：min-w-0、min-w-full、min-w-[200px]
• 最小/大宽度：w-min、w-max、w-fit
• 自定义值：w-[值]
• 自动宽度：w-auto

<div class="w-2">hello world!</div> //w-2=8px 固定宽度
<div class="w-[100px]">hello world!</div> //w-[100px]=100px 自定义宽度
<div class="w-full">hello world!</div> //w-full=100%  占满剩余空间
<div class="w-1/2">hello world!</div> //w-1/2=50% 占一半
<div class="w-min">hello world!</div> //w-min=min-content  最小宽度
<div class="w-max">hello world!</div> //w-max=max-content  最大宽度
<div class="w-fit">hello world!</div> //w-fit=fit-content  根据内容计算宽度
<div class="w-auto">hello world!</div> //w-auto=auto  自动读取宽度
<div class="min-w-full">hello world!</div> //min-w-full=min-content  最小宽度
<div class="min-w-0">hello world!</div> //min-w-0=0 最小宽度
<div class="min-w-[200px]">hello world!</div> //min-w-[200px]=200px 自定义最小宽度

2.高

格式：h-前缀

• 固定高度：h-数字
• 百分比宽度：h-1/2、h-full、h-1/4、h-3/4
• 自定义精确值：h-[值] 、h-[60px]、h-[screen]全屏高度、h-[50vh]
• 自动高度：h-auto

<div class="h-12">怪可爱的地球人</div> //h-12=48px 固定高度
<div class="h-[100px]">怪可爱的地球人</div> //h-[100px]=100px 自定义高度
<div class="h-auto">怪可爱的地球人</div> //h-auto=auto  自动读取高度
<div class="h-[screen]">怪可爱的地球人</div> //h-[screen]=100vh 全屏高度
<div class="h-full">怪可爱的地球人</div> //h-full=100%  占满剩余空间
<div class="h-min">怪可爱的地球人</div> //h-min=min-content  最小高度
<div class="h-max">怪可爱的地球人</div> //h-max=max-content  最大高度
<div class="h-fit">怪可爱的地球人</div> //h-fit=fit-content  合适高度
<div class="min-h-full">怪可爱的地球人</div> //min-h-full=min-content  最小高度
<div class="min-h-0">怪可爱的地球人</div> //min-h-0=0 最小高度
<div class="min-h-[200px]">怪可爱的地球人</div> //min-h-[200px]=200px 自定义最小高度
<div class="max-h-full">怪可爱的地球人</div> //max-h-full=max-content  最大高度
<div class="max-h-[200px]">怪可爱的地球人</div> //max-h-[200px]=200px 自定义精确度高度

3.字体 (font-size)

格式：text-[~px]

• 超小号：text-xs（12px=0.75rem）
• 小号：text-sm （14px=0.875rem）
• 标准：text-base (16px=1rem)
• 大号：text-lg (18px=1.125rem)
• 超大号：text-xl (20px=1.25rem)
• 倍数大号：text-2xl (24px=1.5rem)、text-3xl、text-4xl、text-5xl、
• 自定义精确值：text-[100px]
• 响应式字体：

  • 无前缀-移动端-手机竖屏iphone SE、小屏手机（<640px）: text-sm

  • sm:移动端-iphone12/13/14等大屏手机（≥640px）: sm：text

  • md:平板中等屏幕-ipad竖屏（768px）（≥768px）: md:text-base

  • lg:平板横屏/小笔记本-ipad横屏、小笔记本（≥ 1024px）: lg:text-lg

  • xl:桌面显示器-普通桌面显示器（≥ 1280px）: xl:text-xl

  • 2xl:超超大屏幕-4k显示器-大桌面显示器（≥ 1536px）: 2xl:text-2xl

  • 总结响应式字体-网站字体响应式：

<!-- 完整响应式 -->
<div class="
  text-xs          <!-- 移动端 12px -->
  sm:text-sm       <!-- 小屏 14px -->
  md:text-base     <!-- 平板 16px -->
  lg:text-lg       <!-- 桌面 18px -->
  xl:text-xl       <!-- 大桌面 20px -->
">
  网站内容
</div>

• 一般页面

  <div class="text-xs">超小号字体12px</div>
  <div class="text-sm">小号字体14px</div>
  <div class="text-base">基础（默认）字体16px</div>
  <div class="text-lg">大号字体18px</div>
  <div class="text-xl">超大号字体20px</div>
  <div class="text-2xl">2倍大字体24px</div>
  <div class="text-[15px]">自定义精确度字体15px</div>

4.行高（line-height）

格式：leading-前缀

• 自定义精确度行高：leading-[50px]
• 无行高:leading-none （1倍字体大小）//默认字体16px,行高就是16px
• 紧密行高:leading-tight 1.25 紧密（1.25倍）
• 紧凑行高:leading-snug 1.375 紧凑（1.375倍）
• 正常行高:leading-normal 1.5 正常（1.5倍-默认）
• 宽松行高:leading-relaxed 1.625 宽松（1.625倍）
• 松散行高:leading-loose 2 松散（2倍）
• 响应式行高自适应：
  • leading-tight 移动端
  • md:leading-normal 平板
  • lg:leading-relaxed 桌面

<!-- 完整响应式链 -->
<div class="
  leading-tight       <!-- 移动端 1.25倍 -->
  md:leading-normal   <!-- 平板 1.5倍 -->
  lg:leading-relaxed  <!-- 桌面 1.625倍 -->
">
  完整响应式行高
</div>

• 一般页面（实际text-xs``12px字体大小乘以1，1.25,1.375,1.5,1.625,2）

 <div class="leading-none">无行高（1）</div>
 <div class="leading-tight">紧密行高（1.25）</div>
 <div class="leading-snug">紧凑行高（1.375）</div>
 <div class="leading-normal">正常行高（1.5）</div>
 <div class="leading-relaxed">宽松行高（1.625）</div>
 <div class="leading-loose">松散行高（2）</div>

5.圆角border-radius

格式：rounded-[值]

• 自定义圆角：rounded-[值]

• 无圆角：rounded-none 0 0px

• 小圆角:rounded-sm 0.125rem 2px

• 默认圆角:rounded 0.25rem 4px

• 中等圆角:rounded-md 0.375rem 6px

• 大圆角:rounded-lg 0.5ren 8px

• 超大圆角:rounded-xl 0.75rem 12px

• 2倍大圆角:rounded-2xl 1rem 16px

• 3倍大圆角:rounded-3xl 1.5rem 24px

• 完全圆形:rounded-full 9999px 完全圆形

• 常用场景

  • 卡片：rounded-lg（8px）或 rounded-xl（12px）
  • 输入框：rounded-md（6px）或 rounded-full（圆形）
  • 头像：rounded-full（圆形）

• 四个角的区别：

• css border-radius:[左上角 右上角 右下角 左下角]

border-radius: top-left top-right bottom-right bottom-left;

• unocss rounded-[左上角_右上角_右下角_左下角]

rounded-[10px_20px_30px_40px]

  <div class="rounded-[20px] bg-black">四个都一样大的圆角</div>
  <div class="rounded-[20px_10px_5px_15px] bg-black">四个都不一样大的圆角</div>

6.背景颜色：background

• 透明背景：bg-transparent

• 白色：bg-white

• 黑色：bg-black

• 色系由浅到深：bg-颜色-度数 （bg-gray-50,bg-gray-200,bg-gray-900）

• 十六进制:bg-[#ffffff]

• RGB/RGBA颜色：

  • RGB颜色：bg-[rgb(255,87,51)]
  • RGBA颜色（带透明）：bg-[rgba(255,87,51,0.5)]

• HSL/HSLA颜色

  • HSL颜色L：bg-[hsl(0,100%,50%)]
  • HSLA颜色（带透明）：bg-[hsla(0,100%,50%，0.5)]

• 背景渐变

  • 从左到右：bg-gradient-to-r from-blue-500 to-purple-500
  • 从上到下：bg-gradient-to-b from-blue-500 to-purple-500"
  • 从右上到左下：bg-gradient-to-bl from-blue-500 to-purple-500
  • 渐变方向：

<!-- 方向类 -->
bg-gradient-to-r    <!-- 从左到右 -->
bg-gradient-to-l    <!-- 从右到左 -->
bg-gradient-to-t    <!-- 从下到上 -->
bg-gradient-to-b    <!-- 从上到下 -->
bg-gradient-to-tr   <!-- 从左下到右上 -->
bg-gradient-to-tl   <!-- 从右下到左上 -->
bg-gradient-to-br   <!-- 从左上到右下 -->
bg-gradient-to-bl   <!-- 从右上到左下 -->

• 多色渐变
  • 三色渐变：bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
  • 四色渐变：bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 to-blue-500
• 自定义渐变
  • 自定义渐变颜色：bg-gradient-to-r from-[#FF5733] to-[#3498DB]
  • 自定义渐变方向：bg-[linear-gradient(45deg,#FF5733,#3498DB)]

7.背景图片

• 背景图片：bg-[url('/path/to/image.jpg')]
• 背景大小：bg-cover 覆盖、bg-contain 包含、bg-auto 自动
• 背景位置：bg-center居中、bg-top顶部、bg-bottom底部、bg-left左侧、bg-right右侧
• 背景重复：bg-repeat重复、bg-no-repeat不重复、bg-repeat-x水平重复、bg-repeat-y垂直重复
• 响应式背景颜色

<!-- 响应式背景颜色 -->
<div class="
  bg-white          <!-- 移动端白色 -->
  md:bg-gray-100    <!-- 平板浅灰 -->
  lg:bg-gray-200    <!-- 桌面浅灰 -->
">
  响应式背景颜色
</div>

<!-- 响应式渐变 -->
<div class="
  bg-blue-500                           <!-- 移动端纯色 -->
  md:bg-gradient-to-r md:from-blue-500 md:to-purple-500  <!-- 平板渐变 -->
">
  响应式渐变
</div>

<!-- 背景图片 -->
<div class="bg-[url('/path/to/image.jpg')]">
  背景图片
</div>

<!-- 背景图片 + 其他属性 -->
<div class="
  bg-[url('/path/to/image.jpg')]
  bg-cover
  bg-center
  bg-no-repeat
">
  背景图片（覆盖、居中、不重复）
</div>

• 背景颜色跟透明度组合用

//使用opacity
<!-- 背景颜色 + 透明度 -->
<div class="bg-blue-500 opacity-50">
  50% 透明度
</div>

<div class="bg-blue-500 opacity-75">
  75% 透明度
</div>

//使用RGBA
<!-- RGBA 颜色（推荐） -->
<div class="bg-[rgba(59,130,246,0.5)]">
  50% 透明度蓝色
</div>

8.透明度opacity

• 基础透明度：
  • 完全透明（不可见）： opacity-0
  • 5%透明度： opacity-5 0.05
  • 10%透明度： opacity-10 0.1
  • 20%透明度： opacity-20 0.2
  • 25%透明度： opacity-25 0.25
  • 30%透明度： opacity-30 0.3
  • 100%透明度： opacity-100 1 （完全不透明）
• 自定义精确值透明度：
  • 15%透明度 opacity-[0.15]
  • 35%透明度 opacity-[0.35]
  • 55%透明度 opacity-[0.55]
  • 99%透明度 opacity-[0.99]
• 响应式透明

<!-- 响应式透明度 -->
<div class="
  opacity-100      <!-- 移动端完全不透明 -->
  md:opacity-90    <!-- 平板 90% 透明度 -->
  lg:opacity-80    <!-- 桌面 80% 透明度 -->
">
  响应式透明度
</div>

• 实际应用：

//1.半透明遮罩层
<!-- 半透明遮罩 -->
<div class="bg-black opacity-50 fixed inset-0 z-50">
  半透明遮罩层（50% 透明度）
</div>

<!-- 或者使用 RGBA（推荐） -->
<div class="bg-[rgba(0,0,0,0.5)] fixed inset-0 z-50">
  半透明遮罩层（RGBA 方式）
</div>
//2.半透明卡片
<!-- 半透明卡片 -->
<div class="bg-white opacity-80 rounded-lg shadow-md p-4">
  半透明卡片（80% 透明度）
</div>

<!-- 背景半透明 -->
<div class="bg-blue-500 opacity-50 text-white p-4">
  半透明蓝色背景（50% 透明度）
</div>
//3.悬停效果
<!-- 悬停时改变透明度 -->
<div class="opacity-70 hover:opacity-100 transition-opacity">
  悬停时变不透明
</div>

<!-- 悬停时变透明 -->
<div class="opacity-100 hover:opacity-50 transition-opacity">
  悬停时变透明
</div>
//4.禁用状态
<!-- 禁用按钮（半透明） -->
<button class="opacity-50 cursor-not-allowed" disabled>
  禁用按钮
</button>

<!-- 禁用输入框 -->
<input class="opacity-50" disabled placeholder="禁用输入框" />

//5.淡入淡出效果
<!-- 淡入 -->
<div class="opacity-0 animate-fade-in">
  淡入动画
</div>

<!-- 淡出 -->
<div class="opacity-100 animate-fade-out">
  淡出动画
</div>

9.字体颜色color

• 基础颜色字体

  • 透明文字：text-transparent
  • 白色：text-white
  • 黑色：text-black

• 颜色系

  • 浅灰：text-gray-50
  • 中灰：text-gray-500
  • 深灰：text-gray-900

• 自定义字体颜色

  • 十六进制颜色：格式：text-[#ffffff]
  • RGB/RGBA颜色：
    • RGB颜色格式：text-[rgb(255,87,51)]
    • RGBA颜色格式：text-[rgba(255,87,51,0.5)]
  • HSL/HSLA颜色：
    • HSL颜色格式：text-[hsl(0,100%,50%)]
    • HSLA颜色格式：text-[hsla(0,100%,50%,0.5)]

• 响应式字体颜色

<!-- 响应式字体颜色 -->
<div class="
  text-gray-900      <!-- 移动端深灰 -->
  md:text-gray-700   <!-- 平板中灰 -->
  lg:text-gray-600   <!-- 桌面深灰 -->
">
  响应式字体颜色
</div>

<!-- 响应式彩色 -->
<div class="
  text-blue-500      <!-- 移动端蓝色 -->
  md:text-purple-500 <!-- 平板紫色 -->
  lg:text-pink-500   <!-- 桌面粉色 -->
">
  响应式彩色文字
</div>

10.文本居中text-align

• 左对齐（默认）：text-left
• 居中对齐：text-center
• 右对齐：text-right
• 两端对齐：text-justify

11.对齐内容justify-content

• 起始对齐：justify-start
• 末尾对齐：justify-end
• 居中对齐：justify-center
• 两端对齐：justify-between
• 环绕对齐：justify-around
• 均匀对齐：justify-evenly
• 拉伸对齐：justify-stretch

12.字体粗细或者字体权重font-weight

• 字体粗细：
  • 极细：font-thin 100
  • 超细：font-extralight 200
  • 细：font-light 300
  • 正常（默认）：font-normal 400
  • 中等：font-medium 500
  • 半粗：font-semibold 600
  • 粗体：font-bold 700
  • 超粗：font-extrabold 800
  • 极粗：font-black 900

13.内边距padding

• 所有方向： p-{size}
  • 无内边距 p-0
  • 小内边距 p-1 4px 0.25rem
  • 小内边距 p-2 8px 0.5rem
• 水平方向（左右）： px-{size}
• 垂直方向（上下：py-{size}
• 顶部：pt-{size}
• 右侧：pr-{size}
• 底部：pb-{size}
• 左侧：pl-{size}

14.外边距margin

• 所有方向:m-{size}
• 水平方向（左右）:mx-{size}
• 垂直方向（上下）:my-{size}
• 顶部:mt-{size}
• 右侧:mr-{size}
• 底部:mb-{size}
• 左侧:ml-{size}
• 自定义精确度：m-[值]

15.display

• 隐藏元素：hidden
• 块级元素：block
• 行内块元素:inline-block
• 行内元素:inline
• 弹性布局:flex
• 行内弹性布局:inline-flex
• 网格布局:grid
• 行内网格布局:inline-grid
• 表格:table
• 行内表格:inline-table
• 表格单元格:table-cell
• 表格行:table-row
• 内容显示:contents
• 列表项:list-item

在项目中，可以用驼峰命名，以下原因：

1.presetAttributify

（配置中导入了 presetAttributify，虽然没在 presets 中使用，但如果启用它，可以使用驼峰命名作为属性：）

2：自定义规则

// uno.config.ts
export default defineConfig({
  rules: [
    // 支持 p2, p4 等驼峰命名
    [/^p(\d+)$/, ([, d]) => ({ padding: `${d * 0.25}rem` })],
    [/^px(\d+)$/, ([, d]) => ({ 'padding-left': `${d * 0.25}rem`, 'padding-right': `${d * 0.25}rem` })],
    // ... 其他规则
  ],
})

如何启用驼峰命名支持：

• 1.启用presetAttributify

// uno.config.ts
import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from "unocss";

export default defineConfig({
  shortcuts: {
    // ... 你的快捷方式
  },
  presets: [
    presetWind3({ prefix: "ly-" }),
    presetAttributify({ prefix: "ly-" }), // 添加这个
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

使用：

<template>
  <!-- 属性化模式：驼峰命名 -->
  <div lyP="4" lyTextCenter lyBgBlue500>
    内容
  </div>
</template>

• 2.添加自定义规则

// uno.config.ts
export default defineConfig({
  rules: [
    // 支持 p2, p4 等
    [/^p(\d+)$/, ([, d]) => ({ padding: `${Number(d) * 0.25}rem` })],
    [/^px(\d+)$/, ([, d]) => ({ 
      'padding-left': `${Number(d) * 0.25}rem`,
      'padding-right': `${Number(d) * 0.25}rem`
    })],
    [/^py(\d+)$/, ([, d]) => ({ 
      'padding-top': `${Number(d) * 0.25}rem`,
      'padding-bottom': `${Number(d) * 0.25}rem`
    })],
    // 支持 textCenter, textLeft 等
    [/^text(Center|Left|Right|Justify)$/, ([, align]) => ({ 
      'text-align': align.toLowerCase() 
    })],
    // 支持 bgBlue500 等
    [/^bg([A-Z][a-z]+)(\d+)$/, ([, color, shade]) => {
      const colorMap: Record<string, string> = {
        'Blue': 'blue',
        'Red': 'red',
        'Green': 'green',
        // ... 其他颜色
      }
      return { 'background-color': `var(--color-${colorMap[color]}-${shade})` }
    }],
  ],
  // ...
})

方式1：用标准的kebab-case的优点

• 标准 UnoCSS 格式
• 无需额外配置
• 兼容性好
• 文档齐全

方式 2：属性化模式（presetAttributify）

<template>
  <!-- 属性化模式：驼峰命名 -->
  <div p="4" textCenter bgBlue500>
    内容
  </div>
</template>

优点：

• 更符合 Vue 属性写法
• 可以条件绑定
• 代码更简洁

缺点：

• 需要额外配置
• 可能与 Vue 属性冲突