unocss
安装
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
.b-none .b-dashed .b-solid .b-dotted .b-double
.b-rd .rd .b-rd-0 .b-rd-1 .b-rd-2
z-index
.z-10 .z-100 .-z-10 .-z-100
flex
.flex .flex-col .flex-col-reverse .flex-row .flex-row-reverse .flex-wrap .flex-nowrap
.flex-1 .flex-auto
.justify-start .justify-end .justify-center
items-start .items-end .items-center
text
.text-1(0.25rem) .text-4(1rem) .text-8(2rem)
.text-start .text-center .text-end .text-left .text-right
.text-black .text-blue .text-red .text-violet
.text-1 .text-2xl .text-3xl
font
.fw-100 .fw-200 .fw-300
animate
animate-bounce
-in、-out、-alt、-in-left、-in-right、-in-up、-in-down、
-out-left、-out-right、-out-up、-out-down
animate-back
-in-down、-in-up、-in-left、-in-right
animate-rotate
-in、-in-down-left、-in-down-right、-in-up-left、-in-up-right
animate-fade-in
-bottom-left、-bottom-right
cursor
-none 、-pointer、-wait、-crosshair 、-text
hover
hover=‘’