tailwindcss常用样式

阴影

shadow-[1px_2px_2px_1px_#888888]

旋转

//正转        倒转
rotate-90    -rotate-90

滚动条

overflow-auto      overflow-hidden      overflow-scroll    
overflow-x-auto    overflow-x-hidden    overflow-x-scroll    
overflow-y-auto    overflow-y-hidden    overflow-y-scroll    

鼠标小手

cursor-pointer

 grid布局

//grid布局
grid 
//分割成八块 间距12px      间距4px    该dom占几个格子
grid-cols-8 gap-[12px]    gap-x-4    col-span-1
//分割成4行  数据竖着展示   间距4px    该dom占几个格子
grid-rows-4 grid-flow-col gap-y-4    row-span-1
//间距4
gap-4

flex布局

//flex布局
flex
//横着布局                   横着倒叙
flex-row                    flex-row-reverse
//竖着布局（默认横着）        竖着倒叙
flex-col                    flex-col-reverse
//换行        倒叙换行             不换行
flex-wrap    flex-wrap-reverse    flex-nowrap
//justify布局方法    
justify-center justify-evenly justify-between justify-around justify-start justify-end
//items布局方法
items-center items-start items-end
//flex：1 占满剩余位置
flex-1

 文字

//设置文字颜色      文字大小            文字加粗        文字倾斜    浏览器标准文字样式
text-[#fff]        text-[12px]        font-[600]     italic      not-italic
//文字溢出...省略
truncate

div

//圆角
rounded-[4px]
//宽         高            
w-[45px]     h-[45px]      
//外边距        上下边距        左右边距        上边距(右:r、下:b、左:l)  上右下左
m-[12px]        my-[12px]      mx-[12px]      mt-[12px]                m-[12px_0_0_25px]
//内边距        上下边距        左右边距        上边距(右:r、下:b、左:l)  上右下左
p-[12px]        py-[12px]      px-[12px]      pt-[12px]                p-[12px_0_0_25px]