第四章：样式体系和组件方案 —— 装修材料怎么选

这一章里，把样式体系看成“装修材料标准”，把组件方案看成“标准户型图”。材料统一了，装修师傅才不会每家店都重造一遍。

#Tailwind CSS —— 城市统一路标系统

@import "tailwindcss";

Tailwind 不是“组件库”，而是一套样式语言。

你可以把它理解成：

• 边距怎么写
• 颜色怎么写
• 响应式怎么写
• 状态样式怎么写

都用一套统一的“施工标签”。

适合：

• 想快速统一样式表达
• 设计系统刚建立
• 团队愿意接受 utility-first

#shadcn/ui —— 建材市场 + 户型图

pnpm dlx shadcn@latest add button

shadcn/ui 的关键不是“安装一个黑盒组件库”，而是：

• 把组件代码拷进你仓库
• 你自己拥有它
• 你自己继续改

这和传统 UI 库非常不一样。

Tailwind 和 shadcn/ui 的关系：

所以很多 React 项目的常见组合是：

React / Next.js
   + Tailwind CSS
   + shadcn/ui

这就像：

• Tailwind 负责统一装修材料
• shadcn/ui 负责给你一套可改造的标准店铺骨架