快速理解高频使用的Tailwind Css类命名规则和使用场景。

1. 布局相关

• Flex布局

  • flex : 开启flex布局
  • flex-wrap : 允许flex项目换行
  • flex-nowrap : 禁止flex项目换行
  • items-center : 垂直居中对齐
  • justify-between : 两端对齐
  • justify-end : 尾部对齐
  • gap-x-1 , gap-x-3.5 : 设置水平间距

• 定位

  • sticky : 粘性定位
  • fixed : 固定定位
  • relative : 相对定位
  • absolute : 绝对定位
  • inset-x-0 : 左右边距为0
  • inset-y-0 : 上下边距为0
  • top-0 : 顶部距离为0

2. 尺寸与间距

• 宽度

  • w-full : 宽度100%
  • w-65 : 宽度16.25rem
  • size-4 : 宽高都为1rem
  • size-6 : 宽高都为1.5rem
  • size-9.5 : 宽高都为2.375rem

• 内外边距

  • p-4 : 内边距1rem
  • px-4 : 水平内边距1rem
  • py-2.5 : 垂直内边距0.625rem
  • me-5 : 右外边距1.25rem
  • ms-auto : 左外边距auto

3. 颜色与背景

• 文本颜色

  • text-gray-800 : 深灰色文本
  • text-gray-400 : 浅灰色文本
  • text-white : 白色文本
  • text-neutral-400 : 中性灰色文本

• 背景颜色

  • bg-white : 白色背景
  • bg-gray-100 : 浅灰色背景
  • bg-neutral-800 : 深色中性背景
  • hover:bg-gray-100 : 悬停时的背景色

4. 文字排版

• 字体大小

  • text-sm : 小号文本
  • text-xl : 特大号文本

• 字体样式

  • font-semibold : 半粗体
  • text-start : 文本左对齐

5. 交互状态

• 悬停状态

  • hover:bg-gray-100 : 悬停时背景色
  • hover:text-blue-600 : 悬停时文字颜色

• 焦点状态

  • focus:outline-hidden : 隐藏焦点轮廓
  • focus:bg-gray-100 : 焦点时背景色
  • focus:border-blue-500 : 焦点时边框颜色

6. 响应式设计

• 断点前缀
  • md: : 中等屏幕（768px起）
  • lg: : 大屏幕（1024px起）
  • sm: : 小屏幕（640px起）
  • dark: : 暗色模式

7. 边框与圆角

• 边框

  • border-b : 底部边框
  • border-gray-200 : 边框颜色
  • border-neutral-700 : 深色模式边框颜色

• 圆角

  • rounded-lg : 大圆角
  • rounded-md : 中等圆角
  • rounded-full : 完全圆形
    这些类名遵循Tailwind的命名规则： 属性-[断点:]-[状态:]-值 。例如：

• hover:bg-gray-100 = 悬停状态 + 背景色 + 灰色100

• lg:hidden = 大屏幕 + 隐藏

• dark:text-neutral-400 = 暗色模式 + 文本颜色 + 中性色400