Shortcuts

UnoCSS Shortcuts 系统，提供常用样式组合的快捷类名，简化开发并保持样式一致性。

快捷列表

使用示例

完整配置

Tip

点击卡片可复制 shortcut 名称

empty

空值占位符（显示 --）

展开后的类名

empty:before:content-["--"]

flex-between

水平布局，两端对齐

展开后的类名

flex items-center justify-between

flex-col-between

垂直布局，两端对齐

展开后的类名

flex flex-col justify-between

form-card

表单卡片容器样式

展开后的类名

rounded bg-white px-6 pt-5 pb-1px

card-default

默认卡片容器样式

展开后的类名

rounded bg-white px-6 py-5

card-default-border

带边框的默认卡片样式

展开后的类名

rounded bg-white px-6 py-5 border border-solid border-gray-3

card-default-sm

小尺寸卡片容器样式

展开后的类名

rounded bg-white px-6 pt-4 pb-5

card-header

卡片头部容器样式

展开后的类名

flex items-center justify-between pb-4

card-header-title

卡片标题样式

展开后的类名

text-base-m truncate

card-header-extra

卡片头部额外操作区样式

展开后的类名

ml-4 flex-shrink-0 text-gray-6 cursor-pointer flex items-center gap-4

descriptions-title

描述列表标题样式

展开后的类名

font-600 text-gray-8 mb-4

descriptions

描述列表网格布局

展开后的类名

grid gap-x-6 gap-y-3 w-full grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4

descriptions-item

描述列表项样式

展开后的类名

flex gap-3 [&>:first-child]:text-gray-6 [&>:first-child]:text-nowrap [&>:last-child]:flex-1 [&>:last-child]:min-w-0 [&>:last-child]:break-all

form-item-compact

紧凑型表单项样式

展开后的类名

[&_.ant-form-item-control-input]:min-h-22px [&_.ant-form-item-no-colon]:h-22px

tag-base

标签基础样式

展开后的类名

inline-block box-border rounded-xs border border-solid border-transparent

tag-default

默认标签样式

展开后的类名

inline-block box-border rounded-xs border border-solid border-transparent px-1 bg-gray-2 text-gray-7 text-xs

tag-default-lg

大尺寸默认标签样式

展开后的类名

inline-block box-border rounded-xs py-1px px-2 bg-gray-2 text-gray-7 text-sm

bg-body

页面背景色

展开后的类名

bg-#f5f5f5

tag-success

成功状态标签

展开后的类名

inline-block box-border rounded-xs px-1 bg-gray-2 text-gray-7 text-xs border-success-1 bg-success-1 text-success

tag-error

错误状态标签

展开后的类名

inline-block box-border rounded-xs px-1 bg-gray-2 text-gray-7 text-xs border-error-1 bg-error-1 text-error

tag-warning

警告状态标签

展开后的类名

inline-block box-border rounded-xs px-1 bg-gray-2 text-gray-7 text-xs border-warning-1 bg-warning-1 text-warning

tag-success-lg

大尺寸成功状态标签

展开后的类名

inline-block box-border rounded-xs py-1px px-2 bg-gray-2 text-gray-7 text-sm border-success-1 bg-success-1 text-success

tag-error-lg

大尺寸错误状态标签

展开后的类名

inline-block box-border rounded-xs py-1px px-2 bg-gray-2 text-gray-7 text-sm border-error-1 bg-error-1 text-error

tag-warning-lg

大尺寸警告状态标签

展开后的类名

inline-block box-border rounded-xs py-1px px-2 bg-gray-2 text-gray-7 text-sm border-warning-1 bg-warning-1 text-warning

tabs-no-border

无边框的 Tabs 样式

展开后的类名

[&_.ant-tabs-nav::before]:!border-none

pagination-bottom-0

底部无边距的分页样式

展开后的类名

[&_.ant-pagination]:mb-0

占位符类

empty

空值占位符，用于数据为空时显示横线

效果

代码

姓名：张三

编号：0

备注：

昵称：

描述：

<div className="descriptions">
  <div className="descriptions-item">
    <span>姓名：</span>
    <span className="empty">{values.name}</span>
  </div>
  <div className="descriptions-item">
    <span>编号：</span>
    <span className="empty">{values.code}</span>
  </div>
  <div className="descriptions-item">
    <span>备注：</span>
    <span className="empty">{values.remark}</span>
  </div>
  <div className="descriptions-item">
    <span>昵称：</span>
    <span className="empty">{values.nickname}</span>
  </div>
  <div className="descriptions-item">
    <span>描述：</span>
    <span className="empty">{values.empty}</span>
  </div>
</div>

布局类

用于快速实现常见布局结构的快捷类：

flex-between

水平布局，两端对齐（flex + items-center + justify-between）

效果

代码

左侧内容右侧内容

flex-col-between

垂直布局，两端对齐（flex + flex-col + justify-between）

效果

代码

顶部内容底部内容

卡片类

统一的卡片容器样式，提供一致的视觉效果：

card-default

默认卡片样式（圆角 + 白色背景 + 标准内边距）

效果

代码

这是默认卡片内容

card-default-border

带边框的默认卡片样式

效果

代码

这是带边框的卡片内容

card-default-sm

小尺寸卡片样式（顶部内边距更小）

效果

代码

这是小尺寸卡片内容

form-card

表单卡片样式（底部边距为 1px）From.Item 默认会有 margin-bottom: 24px;

效果

代码

import { Button, Form, Input, Select } from 'antd';

<div className="form-card max-w-sm bg-body">
  <Form layout="vertical">
    <Form.Item label="用户名" name="username" rules={[{ required: true }]}>
      <Input placeholder="请输入用户名" />
    </Form.Item>
    {/* ... more form items */}
  </Form>
</div>

卡片头部类

卡片区域的细分样式：

完整的卡片头部示例

效果

代码

卡片标题

操作 1操作 2

卡片内容区域

<div className="card-default">
  <div className="card-header">
    <div className="card-header-title">卡片标题</div>
    <div className="card-header-extra">
      <span>操作 1</span>
      <span>操作 2</span>
    </div>
  </div>
  <div>卡片内容区域</div>
</div>

描述列表类

用于展示键值对信息的网格布局：

完整的描述列表示例

效果

代码

基本信息

姓名张三

年龄25

城市北京

职业工程师

邮箱zhangsan@example.com

手机13800138000

<div>
  <div className="descriptions-title">基本信息</div>
  <div className="descriptions xl:grid-cols-3">
    <div className="descriptions-item">
      <span>姓名</span>
      <span className="empty">张三</span>
    </div>
    <div className="descriptions-item">
      <span>年龄</span>
      <span className="empty">25</span>
    </div>
    {/* ... more items */}
  </div>
</div>

标签类

统一的标签样式系统：

基础标签

效果

代码

默认标签大尺寸标签

状态标签

效果

代码

默认成功错误警告默认成功状态错误状态警告状态

<div className="flex flex-wrap items-center gap-3">
  <span className="tag-default">默认</span>
  <span className="tag-success">成功</span>
  <span className="tag-error">错误</span>
  <span className="tag-warning">警告</span>
  <span className="tag-default-lg">默认</span>
  <span className="tag-success-lg">成功状态</span>
  <span className="tag-error-lg">错误状态</span>
  <span className="tag-warning-lg">警告状态</span>
</div>

其他工具类

bg-body

页面背景色（#f5f5f5）

效果

代码

这是使用 bg-body 背色的区域

tabs-no-border

去除 Ant Design Tabs 组件导航栏底部的默认边框

效果

代码

默认样式（有边框）

用户管理

角色管理

权限管理

使用 tabs-no-border（无边框）

用户管理

角色管理

权限管理

import { Tabs } from 'antd';

// 默认样式（有边框）
<Tabs defaultActiveKey="1" items={items} />

// 使用 tabs-no-border（无边框）
<div className="tabs-no-border">
  <Tabs defaultActiveKey="1" items={items} />
</div>

pagination-bottom-0

去除 Ant Design Table 组件分页器的默认底部边距

效果

代码

默认样式（分页器有底部间距）

姓名	年龄	地址
张三	32	北京市朝阳区
李四	28	上海市浦东新区

使用 pagination-bottom-0（无底部间距）

姓名	年龄	地址
张三	32	北京市朝阳区
李四	28	上海市浦东新区

{/* 默认样式 */}
<div className="card-default-border">
  <div className="card-header-title mb-4">默认样式（分页器有底部间距）</div>
  <Table
    columns={columns}
    dataSource={data}
    pagination={{ total: 50, pageSize: 10, current: 1 }}
  />
</div>

{/* 使用 pagination-bottom-0 */}
<div className="card-default-border">
  <div className="card-header-title mb-4">使用 pagination-bottom-0（无底部间距）</div>
  <Table
    className="pagination-bottom-0"
    columns={columns}
    dataSource={data}
    pagination={{ total: 50, pageSize: 10, current: 1 }}
  />
</div>

Tip

完整的 UnoCSS 配置文件，可直接复制到项目中使用

uno.config.ts

import { defineConfig, presetWind3 } from 'unocss';

export default defineConfig({
  presets: [presetWind3()],
  cli: {
    entry: {
      patterns: ['**/*.{tsx,mdx}'],
      outFile: 'theme/uno.css',
    },
  },
  rules: [
  ],
  shortcuts: [
    ['empty', 'empty:before:content-["--"]'],
    ['flex-between', 'flex items-center justify-between'],
    ['flex-col-between', 'flex flex-col justify-between'],
    ['form-card', 'rounded bg-white px-6 pt-5 pb-1px'],
    ['card-default', 'rounded bg-white dark:bg-gray-6 px-6 py-5'],
    ['card-default-border', 'card-default border border-solid border-gray-3 dark:border-white-4'],
    ['card-default-sm', 'rounded bg-white dark:bg-gray-6 px-6 pt-4 pb-5'],
    ['card-header', 'flex-between pb-4'],
    ['card-header-title', 'text-base-m truncate'],
    ['card-header-extra', 'ml-4 flex-shrink-0 text-gray-6  cursor-pointer flex items-center gap-4'],
    ['descriptions-title', 'font-600 text-gray-8  mb-4'],
    ['descriptions', 'grid gap-x-6 gap-y-3 w-full grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 @xl:grid-cols-4'],
    [
      'descriptions-item',
      'flex gap-3 [&>:first-child]:text-gray-6 [&>:first-child]: [&>:first-child]:text-nowrap ' +
        '[&>:last-child]:flex-1 [&>:last-child]:min-w-0 [&>:last-child]:break-all',
    ],
    ['search-form-actions', 'col-start-auto flex-1 flex justify-end'],
    ['form-item-compact', '[&_.ant-form-item-control-input]:min-h-22px [&_.ant-form-item-no-colon]:h-22px'],
    ['tag-base', 'inline-block box-border rounded-xs border border-solid border-transparent'],
    ['tag-default', 'tag-base px-1 bg-gray-2 text-gray-7  dark:bg-white-4 dark:text-white text-xs'],
    ['tag-default-lg', 'tag-default py-1px px-2 text-sm'],
    ['bg-body', 'bg-[#f5f5f5] dark:bg-[#1a1a1a]'],
    [
      /^tag-(success|error|warning)(-lg)?$/,
      ([, status, size]) => {
        const baseClass = size ? 'tag-default-lg' : 'tag-default';
        const colorMap: Record<string, string> = {
          success: 'border-success-1 dark:border-success bg-success-1 dark:bg-success text-success dark:text-success-1',
          error: 'border-error-1 dark:border-error bg-error-1 dark:bg-error text-error dark:text-error-1',
          warning: 'border-warning-1 dark:border-warning bg-warning-1 dark:bg-warning text-warning dark:text-warning-1',
        };
        return `${baseClass} ${colorMap[status]}`;
      },
    ],
    ['tabs-no-border', '[&_.ant-tabs-nav::before]:!border-none'],
    ['pagination-bottom-0', '[&_.ant-pagination]:mb-0!'],
  ],
});

使用建议

组件样式组合

// 完整的卡片结构
<div className="card-default">
  <div className="card-header">
    <div className="card-header-title">卡片标题</div>
    <div className="card-header-extra">额外操作</div>
  </div>
  <div className="pt-4">
    卡片内容
  </div>
</div>

// 描述列表
<div className="descriptions">
  <div className="descriptions-item">
    <span>标签</span>
    <span>内容值</span>
  </div>
</div>

标签状态

// 根据状态使用不同的标签样式
<span className="tag-success">成功</span>
<span className="tag-error">失败</span>
<span className="tag-warning">警告</span>

// 大尺寸标签
<span className="tag-success-lg">成功状态</span>

注意事项

语义化命名：shortcut 名称应清晰表达其用途
组合使用：多个 shortcuts 可以组合使用实现复杂效果
避免覆盖：使用 shortcuts 后如需调整，添加额外的类名而非修改 shortcut
保持一致：相同功能的组件应使用相同的 shortcuts

#Shortcuts

#占位符类

#empty

#布局类

#flex-between

#flex-col-between

#卡片类

#card-default

#card-default-border

#card-default-sm

#form-card

#卡片头部类

#完整的卡片头部示例

#描述列表类

#完整的描述列表示例

#标签类

#基础标签

#状态标签

#其他工具类

#bg-body

#tabs-no-border

#pagination-bottom-0

#使用建议

#组件样式组合

#标签状态

#注意事项

Shortcuts

占位符类

empty

布局类

flex-between

flex-col-between

卡片类

card-default

card-default-border

card-default-sm

form-card

卡片头部类

完整的卡片头部示例

描述列表类

完整的描述列表示例

标签类

基础标签

状态标签

其他工具类

bg-body

tabs-no-border

pagination-bottom-0

使用建议

组件样式组合

标签状态

注意事项