源本科技 | 码上会

学习目标 掌握 移动优先 (Mobile First) 的设计哲学，理解为何默认样式服务于小屏幕。 熟记 Tailwind CSS 的 5 个默认断点 (sm, md, lg, xl, 2xl) 及其对应的最小宽度像素值。 学会使用 断点前缀 (如 md:flex, lg:w-1/2) 在特定屏幕尺

学习目标 掌握 Hover (悬停) 状态的设计原则，利用颜色和变换提供即时视觉反馈。 深入理解 Focus (焦点) 管理，构建符合无障碍标准（Accessibility）的表单和导航体验。 熟练运用 Active (激活) 状态模拟物理按压感，提升按钮的触觉反馈。 正确处理 Disabled (

学习目标 掌握 缩放 (Scale) 技术，实现元素的放大强调与响应式适配，理解单轴缩放的视觉效果。 熟练运用 旋转 (Rotate) 类名制作图标转向、加载动画及装饰性元素。 学会使用 位移 (Translate) 进行微调布局、创建悬停浮动效果及实现完全隐藏/显示动画。 理解 倾斜 (Skew)

学习目标 掌握 transition 属性的核心用法，理解如何针对特定属性（颜色、透明度、全部）进行优化。 熟练控制动画时长（Duration）和缓动函数（Timing Function），打造自然流畅的交互体验。 学会使用内置的关键帧动画（animate-spin, animate-pulse,

学习目标 掌握盒阴影（Box Shadow）的各级别应用，利用 shadow-lg 至 shadow-xl 构建界面层级，理解 shadow-inner 的特殊用途。 熟练运用透明度（Opacity）控制元素显隐，区分元素整体透明与背景透明的差异。 学会使用模糊（Blur）、亮度（Brightnes

学习目标 掌握圆角（Border Radius）的多种形态，从微调到全圆，打造符合现代审美的卡片与按钮。 灵活控制边框的宽度、颜色和样式（实线、虚线、点线），适应不同视觉需求。 学会使用 divide-* 系列工具类，优雅地处理列表、网格中的元素分割，无需手动管理子元素的 border。 理解单边边

学习目标 熟练掌握背景颜色类名，包括透明度和动态颜色配置。 理解背景图像的覆盖模式（Cover/Contain）和定位策略（Center/No-repeat）。 学会构建线性渐变（Linear Gradients），掌握 from-, via-, to- 的颜色流向控制。 能够组合使用背景属性，解决

学习目标 掌握 Tailwind CSS 中字体家族、大小、字重及颜色的核心类名，构建清晰的视觉层级。 熟练运用行高（Line Height）、字间距（Letter Spacing）和文本对齐属性，优化阅读体验。 学会使用 truncate、break-words 等高级文本处理类名，解决内容溢出和

学习目标 掌握 Tailwind CSS 中宽度（Width）和高度（Height）的核心类名，包括固定值、百分比、视口单位及自动值。 理解 min-w、max-w、min-h、max-h 的作用，学会利用约束性尺寸打造自适应布局。 熟悉 Tailwind 预设的最大宽度断点（如 max-w-sm,

学习目标 理解 Tailwind CSS 间距系统的核心计量单位（0.25rem/4px）及其换算逻辑。 熟练掌握 Padding（内边距）和 Margin（外边距）的全方位控制类名，包括轴向简写。 学会使用 mx-auto 实现块级元素的水平居中，解决常见布局难题。 掌握 space-x 和 sp