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