Tailwind CSS

一、命名规律：前缀 + 属性 + 数值 / 修饰符

Tailwind 的类名大多遵循 「前缀 - 属性 - 值」 的结构，例如：hover:bg-blue-500

• 前缀：状态或条件（如 hover:、md:、focus:）

• 属性：CSS 核心属性（如 bg 对应 background，text 对应 color）

• 值：具体数值或预设值（如 500 表示颜色深度，4 表示间距大小）

二、核心属性缩写规律

大部分类名是 CSS 属性的缩写，记住常用缩写能快速联想：

三、数值体系规律

Tailwind 对尺寸、间距、颜色等采用了统一的数值体系，无需死记具体像素：

1. 间距 / 尺寸数值（m/p/w/h 等）
   以 rem 为单位（1rem = 16px），常用数值对应关系：

• 0 → 0px

• 1 → 4px（0.25rem）

• 2 → 8px（0.5rem）

• 4 → 16px（1rem）

• 6 → 24px（1.5rem）

• 8 → 32px（2rem）
  规律：数值每增加 1，尺寸增加 4px（特殊值：auto、full、screen 等表示自适应）

2. 颜色数值（如 blue-500）
   颜色后数字代表明暗度，范围 100（最浅）到 900（最深）：

• 100/200：浅色调（如背景、次要元素）

• 500：主色调（如按钮、强调元素）

• 700/900：深色调（如文字、边框）

四、状态与响应式前缀规律

前缀用于表示「条件样式」，记住常用前缀的含义即可：

1. 状态前缀（元素交互状态）：

• hover: → 鼠标悬停时（如 hover:bg-blue-600）

• focus: → 元素获得焦点时（如表单输入框）

• active: → 元素被点击时

• disabled: → 元素禁用时

2. 响应式前缀（不同屏幕尺寸）：

• sm: → 小屏幕（≥640px）

• md: → 中屏幕（≥768px）

• lg: → 大屏幕（≥1024px）

• xl: → 超大屏幕（≥1280px）
  规律：前缀从小到大对应屏幕尺寸从小到大，如 text-sm md:text-base 表示「小屏幕文字小，中屏幕文字正常」。

五、布局与定位规律

布局类名大多直观，对应 CSS 布局属性：

• 弹性布局：flex 开头，如 flex-row（横向排列）、justify-center（主轴居中）、items-center（交叉轴居中）

• 网格布局：grid 开头，如 grid-cols-3（3 列网格）、gap-4（网格间距）

• 定位：relative（相对定位）、absolute（绝对定位）、top-0（距离顶部 0）

六、记忆技巧

1. 高频优先：先记住最常用的类（如 flex、bg-gray-100、p-4、text-center），用多了自然记住。

2. 联想 CSS：遇到不熟悉的类名，联想对应的 CSS 属性（如 rounded-lg → border-radius: large）。

3. 利用工具：开发时用 Tailwind 官方文档 或 VS Code 插件（如 Tailwind CSS IntelliSense）自动提示。

4. 归纳分类：按「布局」「颜色」「排版」等类别整理类名，同类规律更易记。