一、TailwindCSS 入门与环境搭建

• 掌握 如何使用安装和配置 TailwindCSS

• 理解 TailwindCSS 的工作原理：扫描 HTML 文件中的类名并生成静态 CSS

• 了解 Tailwind CLI、PostCSS 等不同集成方式的适用场景

二、核心概念与实用工具

• 掌握 使用 utility-first 类（如 flex, p-4, text-center, rotate-90）直接在 HTML 中构建设计

• 理解 响应式设计，通过断点前缀（如 md:flex, lg:hidden）实现多设备适配

• 了解 暗色模式（dark mode）、悬停/焦点状态（hover, focus）等交互样式控制

三、布局系统

• 掌握 Flexbox 相关类（flex, flex-col, justify-center, items-center, gap）进行弹性布局

• 理解 定位（position, top, left, z-index）和尺寸控制（width, max-width, height）

• 了解 网格布局（Grid）基础及列控制（columns）

四、样式与视觉效果

• 掌握 背景（bg-blue-500, bg-cover）、边框（border, rounded-xl）、阴影（shadow-lg）等常用视觉类

• 理解 颜色系统和自定义主题（theme variables）的应用

• 了解 滤镜（filter, blur）、透明度（opacity）、变换（transform, scale, translate）等高级效果

五、排版与文本控制

• 掌握 字体大小（text-lg）、颜色（text-gray-800）、粗细（font-bold）和行高（leading-relaxed）

• 理解 文本对齐（text-center）、换行（whitespace-normal）、溢出处理（truncate）

• 了解 列表样式、装饰线和 SVG 填充/描边（fill, stroke）

六、交互性与可访问性

• 掌握 控制光标样式（cursor-pointer）、点击行为（pointer-events-none）

• 理解 用户选择（select-none）和焦点可见性（focus:outline）

• 了解 过渡与动画（transition, duration-300, animate-spin）的基本使用

七、开发体验优化

• 掌握 在 VS Code 等编辑器中配置 Tailwind CSS 插件以获得智能提示

• 理解 如何通过 content 配置确保 Tailwind 正确扫描源文件中的类名

• 了解 生产环境下自动移除未使用 CSS 的机制及其带来的性能优势

八、项目实践与进阶

• 掌握 构建完整响应式页面（如博客首页、产品卡片）

• 理解 使用 @apply 提取重复样式或创建组件类（适用于复杂项目）

• 了解 Tailwind Plus 提供的官方 UI 组件库及其在实际项目中的加速作用