CSS to UnoCSS Playground

    这是一个 CSS 属性到 UnoCSS 类名的转换工具。输入普通的 CSS 属性，即可获得对应的 UnoCSS 工具类。

    输入 CSS 属性

    每行一个属性，格式: 属性名: 值

    使用示例

    文本居中

    text-align: center

    转换为: text-center

    Flexbox 布局

    display: flex
justify-content: center
align-items: center
gap: 4px

    转换为: flex justify-center items-center gap-1

    间距

    padding-top: 4px
padding-bottom: 4px
padding-left: 8px
padding-right: 8px

    转换为: pb-1 pl-2 pr-2 pt-1

    关于 UnoCSS

    UnoCSS 是一个即时原子化 CSS 引擎，由 Anthony Fu 创建。它具有以下特点：

    • 即时按需生成 - 只生成你实际使用的类
    • 高性能 - 极快的构建速度
    • 完全可定制 - 可以通过规则轻松扩展
    • 智能预设 - 包含 Tailwind CSS 和 Windi CSS 的兼容预设

    了解更多: unocss.dev