tailWindCss类

font-size、weight
    text-[14px]  font-size 14px;
    font-black font-weight: 900;
width
    w-[20px] width:20px;
    w-full width:100%
    !w-[160px]  width: 160px !important;
    max-w-[600px]  max-width: 600px
background
    bg-[#50d71e] background-color:#50d71e
    bg-[rgba(0,0,0,0.6)] background:rgba(0,0,0,0.6);
padding
    !p-[20px] padding: 20px !important;
    pb-[20px] padding-bottom:20px;
color
    text-[#50d71e] color:#50d71e
    text-center  text-align: center
border
    border-solid border-style: solid;
    border-[#243c5a] border-color:#243c5a
    border-b-[1px] border-bottom:1px
    border-[1px] border:1px
    rounded-[12px] border-radius:12px;
cursor
    cursor-pointer cursor: pointer;
行高 line-height
    leading-[136px] line-height
多行溢出省略    
line-clamp-1    文本超出 1 行后截断并添加省略号 
line-clamp-none  取消文本超出隐藏效果
float
    float-left   float:left
display    
    flex display:flex
    block display:block
    inline-block  display:inline-block 
flex相应属性    
    items-center align-items: center;
    justify-between justify-content: space-between; 左右散开
absolute
    position: absolute;
    top-[3px] top:3px
transform
    translate-y-[-50%]  translateY(-50%);
hover  
    hover:bg-[#f5f5f5] hover:background: #f5f5f5
 z-index
     z-[200] z-index:200
       

 

posted @ 2025-11-18 20:16  xuanPhoto  阅读(4)  评论(0)    收藏  举报