Tailwind CSS Cheatsheet
颜色
- 背景色:
bg-{color}-{shade}
例:bg-blue-500 - 文本颜色:
text-{color}-{shade}
例:text-red-700 - 边框颜色:
border-{color}-{shade}
例:border-gray-300
排版
- 字体大小:
text-{size}
例:text-lg,text-xl - 字体粗细:
font-{weight}
例:font-bold,font-light - 文本对齐:
text-{alignment}
例:text-center,text-right
布局
- 盒子模型:
- 内边距:
p-{size},px-{size},py-{size}
例:p-4,px-2 - 外边距:
m-{size},mx-{size},my-{size}
例:m-2,my-3
- 内边距:
- 宽度:
w-{size}
例:w-1/2,w-full - 高度:
h-{size}
例:h-32,h-screen
边框
- 边框:
border,border-{size}
例:border,border-2 - 边框圆角:
rounded,rounded-{size}
例:rounded-md,rounded-full
响应式设计
使用前缀实现响应式样式:
sm:{class},md:{class},lg:{class},xl:{class}
例:md:bg-green-500
Flexbox
- 显示为 flex:
flex - 主轴对齐:
justify-{alignment}
例:justify-center,justify-between - 交叉轴对齐:
items-{alignment}
例:items-start,items-end
网格布局
- 定义网格:
grid - 列数:
grid-cols-{n}
例:grid-cols-3 - 行数:
grid-rows-{n}
例:grid-rows-2
其他常用类
- 阴影:
shadow,shadow-lg - 透明度:
opacity-{value}
例:opacity-50
常用工具类
- 隐藏元素:
hidden - 悬停状态:
hover:{class}
例:hover:bg-blue-700 - 焦点状态:
focus:{class}
例:focus:outline-none