书籍摘要

1. 图书概览

Modern CSS with Tailwind 是一本面向已具备基础 CSS 知识的开发者、系统介绍 Tailwind CSS 2.0 的实用指南。全书共 8 章，约 260 页，采用“边讲边做”的方式，从安装、基础概念、排版、布局、响应式设计到深度定制，帮助读者快速掌握“无命名”的原子化 CSS 开发范式。书中配有 React 与 Rails 两套示例代码，可在线运行。

2. 内容结构

第 1 章：Getting Started with Tailwind

• 安装方式：PostCSS 插件、Tailwind CLI、Create-React-App、Rails Webpacker。
• 三步快速上手：tailwind init 生成配置文件 → 引入 @tailwind base; @tailwind components; @tailwind utilities; → 编译即可使用。
• 5 分钟完成一个音乐会 Hero 页面，体验“加类即所见”的迭代乐趣。

第 2 章：Tailwind Basics

• 原子化思想：每个 class 只做一件事，如 m-4 仅设 margin。
• Preflight：浏览器样式清零，保证跨端一致。
• 重复代码管理：用 React 组件 / Rails helper / @apply 指令抽取公共样式。
• 前缀机制：hover:、focus:、sm: 等，实现交互与响应式。

第 3 章：Typography

• 字体大小：text-xs 到 text-9xl 共 13 级，统一行高。
• 字重、字距、行高、列表样式、文本转换（uppercase 等）。
• 官方插件：@tailwindcss/typography 一键生成文章排版；@tailwindcss/forms 美化原生表单。

第 4 章：The Box

• Box Model 完全可控：padding、margin、border、ring、shadow。
• 背景：纯色、渐变（bg-gradient-to-r from-red-500 to-blue-500）、图片、裁剪（bg-clip-text）。
• 尺寸：w-1/2、h-screen、min-h-0、max-w-xl 等 60+ 组合。

第 5 章：Page Layout

• Container：响应式最大宽度容器，配合 mx-auto 居中。
• Grid：.grid-cols-12 12 栏网格，行列合并、间距、流式填充。
• Flexbox：主轴、交叉轴、换行、排序、自适应伸缩；嵌套行列轻松实现头部-侧边栏-主内容-底部经典布局。
• 对齐：justify-between、items-center、place-content-center 等 20+ 工具类。

第 6 章：Animation

• 现成动画：animate-spin（旋转）、animate-pulse（呼吸）、animate-bounce（弹跳）、animate-ping（脉冲）。
• 过渡：.transition .duration-300 .ease-in-out 与 hover:/focus: 连用，实现颜色、阴影、位移平滑变化。
• 变换：scale-110、rotate-45、translate-x-full、skew-x-12，支持原点调整。

第 7 章：Responsive Design

• 5 个默认断点：sm:640px、md:768px、lg:1024px、xl:1280px、2xl:1536px，采用“移动优先”策略。
• 用法示例：text-xl md:text-2xl lg:text-4xl；hidden lg:block 在移动端隐藏、桌面端显示。
• 响应式网格与导航：在小屏单列堆叠、大屏多列并排的卡片布局；移动端汉堡菜单 ↔ 桌面横向导航的完整代码实战。

第 8 章：Customizing Tailwind

• 配置体系：tailwind.config.js 的 theme、variants、plugins、corePlugins。
• 主题扩展：自定义颜色、间距、断点、z-index 等，支持嵌套对象与覆盖。
• 变体开关：启用 disabled:、odd:、motion-reduce: 等 20+ 前缀。
• 生产优化：使用 PurgeCSS 自动剔除未使用的类，减少 90% 以上 CSS 体积。
• 与旧项目共存：通过 prefix:"tw-" 或 important:true 避免命名冲突；用 resolveConfig 在 JavaScript 中读取设计令牌。

3. 特色亮点

• 零命名烦恼：用组合代替语义类名，大幅缩减 CSS 文件。
• 开发体验佳：保存即热更新，所见即所得，调试直观。
• 生态完备：官方插件、图标库（Heroicons）、UI 套件（Headless UI）无缝衔接。
• 高度可定制：从颜色到断点、从插件到前缀，全部可配置，既适合新项目，也能平滑迁移旧代码。

4. 适合读者

• 已熟悉 HTML/CSS，想提升开发效率的前端工程师。
• 追求设计一致性、需要快速迭代原型的产品团队。
• 希望将传统 CSS/组件框架迁移到原子化方案的维护者。

5. 一句话总结

Modern CSS with Tailwind 以实战案例为线索，全面展示了如何用 Tailwind CSS 在几小时内完成过去需要数天的响应式页面开发，并能在保持高性能的同时实现极致的可定制性。