Tailwind CSS
基础
bg-gray-50 背景颜色 .bg-颜色-值
px-4 内边距 横轴
py-4 内边距 纵轴
pl-4 内边距 左边
pr-4 内边距 右边
pt-4 内边距 上方
pb-4 内边 距 下方
ml-2 左边边距
w-6 宽度 w-full 百分百 w-3/4 比例 w-screen 屏幕宽度
h-6 高度 h-full 百分百 h-screen 屏幕高度 min-h-[500px] 最小高度 max-h-[32rem] 最大高度
rounded 圆角 rounded-full 圆形 rounded-r-none 右边没有圆角
border 边框
border-gray-50 边框颜色
hover:text-gray-50 颜色
hover:underline 下划线
divide-x 分割线 divide-gray-300 颜色
divide-y 分割线
truncate 文本超出自动省略号... 放在文本的上层容器中
flex-wrap 超出自动换行
bg-opacity-0 不透明度
bg-transparent 透明
选项
参数-l-值 左边
参数-r-值 右边
参数-t-值 上边
参数-b-值 下边
参数-full 百分百
参数-none 没有
字体
text-sm 字体大小14px .text-值
.text-gray-50 字体颜色 .text-颜色-值
font-semibold 字体加粗
text-center 容器内的文本全部剧中
图片
object-cover 剧中显示
布局
mx-auto 剧中
items-center 垂直方向剧中 items-start
space-x-4 内部元素间距 横轴
Flex
弹性布局
flex Flex 布局
flex-col 改变flex轴
justify-between 让内部的元素主主轴两侧平铺布局
Block
快布局
block Block 布局
fixed
固定布局
动画
transition-colors 动画过度动画
其他
.fill-current 填充SVG颜色