实战清单与细节规范
你将学会什么
Section titled “你将学会什么”- 按「骨架 → 布局 → 视觉 → 语义」的顺序完成一个页面
- 用最小间距系统和排版层级保持页面整洁
- 写出卡片、表单的最小一致风格
- 用浏览器局部实验代替猜类名
如果你要在近期用 Tailwind 完成一个课程前端项目，建议按这个顺序安排：
- 先把页面骨架搭出来，优先保证结构清晰
- 用
grid或flex解决核心布局 - 再补间距、圆角、边框、阴影这些视觉层细节
- 最后统一颜色语义、状态反馈和暗黑模式
这个顺序能避免你一开始就陷入颜色和字号的细节战争。在此基础上，两套最小规范值得先定下来。
最小间距系统：小间距 4px、8px，中间距 12px、16px，大间距 24px、32px。写页面时只从这套值里选，而不是随手写 13px 或 17px。排版层级：标题一给页面主标题，标题二给区块标题，正文给主要阅读内容，辅助文字给说明提示——层级数量少而稳定。
课程项目里最常见的容器模式是卡片，一个实用最小版可以这样写：
<div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900"> <h3 class="text-lg font-semibold">模块标题</h3> <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">模块说明内容。</p></div>表单输入框也建议先建立最小一致风格：统一高度和内边距，焦点状态有明显提示：
<input class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-indigo-500 focus:outline-none" />写 Tailwind 时，最实用的调试方式不是猜类名，而是打开浏览器开发者工具，在元素上临时加或去掉类观察变化。如果需要在课程展示中还原设计稿，也按「先对齐布局 → 再对齐颜色 → 最后对齐字体」的顺序来，效率会高很多。
先自己回答，再看答案：
- 页面开发推荐的顺序是什么？
- 为什么间距只从固定值里选？
- 还原设计稿时，应该先对齐什么？
参考答案
- 骨架 → 布局 → 视觉层细节 → 颜色语义、状态反馈与暗黑模式。
- 统一间距尺度能让整个页面呼吸感一致，避免每个区块各自为政。
- 先对齐布局（几列、间距、对齐方式），再对齐颜色，最后对齐字体。
- 实战顺序：骨架 → 布局 → 视觉 → 语义，先结构后细节
- 间距只从固定尺度里选，排版层级少而稳定
- 卡片和表单先保证信息边界清晰，再逐步加视觉细节
- 调试用开发者工具局部实验，还原设计稿按“布局 → 颜色 → 字体”对齐