• 以下罗列一些常用的UnoCss样式写法;
  • 还有更多的样式可以去 Unocss官网 查询
// text-16px
font-size: 16px;

// text-#ffffff
color: #ffffff;

// font-700 或 font-bold
font-weight: 700;

// w-full 或 w-100%
width:100%; 

// w-[calc(100%-48px)]
width: calc(100% - 48px);

// h-full 或 h-100%
heigth:100%; 

// relative
position: relative;

// cursor-pointer
cursor: pointer;

// rd-30px
border-radius: 30px;

// border-b-1px
border-bottom-width: 1px;

// border-b-dashed
border-bottom-style: dashed;

// border-b-#E9E9E9
border-bottom-color: #E9E9E9;

// grid
display: grid;

// grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr));

// flex
display: flex;

// items-center
align-items: center;

// items-start
align-items: flex-start;

// flex-col
flex-direction: column;

// justify-center
justify-content: center;

// bg-[length:100%_100%]
background-size: 100% 100%;

// select-none
-webkit-user-select: none;
user-select: none;

// mt-20px
margin-top: 20px;

// mx-12px
margin-right: 12px;
margin-left: 12px;

// my-12px
margin-top: 12px;
margin-bottom: 12px;

// m-12px
margin-right: 12px;
margin-left: 12px;
margin-top: 12px;
margin-bottom: 12px;

//tracking-2px
letter-spacing: 2px; 

// bg-[url(xxxx)]
background-image: url(xxxx);

// bg-center
background-position: center;

// bg-no-repeat
background-repeat: no-repeat;

// bg-#ffffff
background-color: rgb(255 255 255);

// from-#8166F6 to-#B4A5F7 bg-gradient-to-r
background: linear-gradient(to right, #8166F6 , #B4A5F7 );


Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐