unocss

骑猪看日落 2024-04-03 12:36 54阅读 0赞

[UnoCss文档][UnoCss]

[playground][]

## 安装 ##

npm i -D unocss
    # 或者使用 cdn
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>
    //安装unocss以及图标库
    npm i -D unocss @unocss/preset-icons @iconify/json

#### 尺寸 ####

> xs、sm、md、lg、xl

#### other ####

> .select-none .absolute .relative .fixed  
> .overflow-hidden

#### 内外边距 ####

> (可省-) .m-0 .ma .m-1(0.25rem) .m-2(0.2rem)

> .ml .ml-0 .ml-1(0.25rem) .ml-2(0.5rem)  
> .mr .mr-0 .mr-1(0.25rem) .mr-2(0.5rem)  
> .mt .ml-0 .mt-1(0.25rem) .mt-2(0.5rem)  
> .mb .mb-0 .mb-1(0.25rem) .mb-2(0.5rem)

> (可省-) .p-0 .pa .p-1(0.25rem) .p-2(0.5rem)

> .pl .ml-0 .pl-1(0.25rem) .pl-2(0.5rem)  
> .pr .pr-0 .pr-1(0.25rem) .pr-2(0.5rem)  
> .pt .pt-0 .pt-1(0.25rem) .pt-2(0.5rem)  
> .pb .pr-0 .pb-1(0.25rem) .pb-2(0.5rem)

#### top、bottom、left、right ####

> .top-0 .top-1(0.25rem) .top-2(0.5rem) .top-4(1rem)  
> .bottom-0 .bottom-1(0.25rem) .bottom-2(0.5rem) .bottom-4(1rem)  
> .left-0 .left-1(0.25rem) .left-2(0.5rem) .left-4(1rem)  
> .right-0 .right-1(0.25rem) .right-2(0.5rem) .right-4(1rem)

#### width(height同) ####

> .w-0 .w-1(0.25rem) .w-2(0.5rem)

> .w-xs(20rem) .w-sm(24rem) .w-md(28rem) .w-md(32rem) .w-xl(36rem)

> .-w-xs(20rem) .-w-sm(24rem) .-w-md(28rem) .-w-md(32rem) .-w-xl(36rem)

> .w-a .w-screen .w-full

#### background ####

> .bg-black .bg-blue .bg-red .bg-violet

> .bg-repeat

#### opacity ####

> .op10 .op20 .op100

#### border ####

> .b .b-1