-
引言和基础
- Tailwind CSS 和 React 的介绍及其在现代 Web 开发中的地位
- 专业级企业网站的重要性及使用 Tailwind CSS 和 React 构建它们的优势
-
环境准备和安装
- 安装 Node.js 和 npm/yarn的必要性和步骤
- 创建一个新的 React 项目的过程和注意事项
- 在 React 项目中如何安装和配置 Tailwind CSS
-
React 基础
- 如何创建和使用 React 组件
- 如何实现页面路由和导航
-
设计并构建响应式页面布局
- 如何规划和构建响应式网页布局
- 初识和理解响应式设计
-
创建响应式导航
- 使用 Flex 布局设计响应式导航
- 应用 Tailwind CSS 类库进行导航美化
-
实现 Hero 部分页面
- 如何使用 Flex 布局设计 Hero 区域
- 如何进一步运用 Tailwind CSS 进行页面美化
-
深入理解 Tailwind CSS
- 探索和熟悉 Tailwind CSS 类库
- 理解和运用实用程序优先原则
- 学习和使用基本的 Tailwind CSS 实用设定类（如颜色、字体大小、间距等）
-
实战：构建产品页、服务页、关于我们页
- 使用 Grid 布局设计主要内容页面
- 进一步实践和掌握响应式设计
-
布局进阶与 Tailwind CSS
- Position/layout和Box alignment示范和实践
- 使用 Grid 布局实现复杂页面设计
-
交互效果与 Tailwind CSS
- 如何添加 hover, focus 等状态
- 如何利用 Tailwind CSS 实现 Transition 和 Animation 效果
-
实战：创建联系页
- 联系页设计与实现
- 导航功能完善、测试和优化
-
自定义 Tailwind
- 如何自定义主题颜色和字体
- 如何扩展 Tailwind CSS 默认功能
- 如何使用
@apply指令构建组件样式
-
性能优化入门
- 如何理解并移除未在生产环境中使用的 CSS
- 如何开始进行页面加载速度优化
-
实战：站点优化和部署
- 如何实现动态路由并优化页面访问流畅度
- 如何应用 SEO 和 accessibility 最佳实践提高网站质量
- 如何打包和部署网站，理解其重要性和操作步骤
-
进阶性能优化
- 深入理解和优化页面加载速度
- 学习和应用代码分割和懒加载技术
-
收尾
- 如何找到更多帮助和资源以进一步学习 Tailwind CSS 和 React
- 总结全书内容，回顾学习重点和知识体系
