技术栈详解
16.4 Tailwind CSS 餐厅的装修工具
餐厅比喻
你的Twitter餐厅有了房子,现在要装修。
传统装修方式
- 拿出油漆桶
- 调配颜色
- 拿刷子一笔一笔涂
- 涂错了要重新来
- 很慢!
Tailwind CSS装修方式
就像魔法贴纸:
- 说一声"蓝色墙壁",贴上蓝色贴纸
- 说一声"大字招牌",贴上大字贴纸
- 说一声"圆角桌子",贴上圆角贴纸
- 超快!
Tailwind CSS就是餐厅的装修魔法!
技术上,Tailwind CSS是什么?
Tailwind CSS是一个CSS框架,提供预定义的样式class。
就像装修贴纸:
- 不用调配颜色
- 不用一笔一笔涂
- 直接贴上就好
用Twitter来理解
场景:装修推文卡片
传统CSS:
<!-- HTML -->
<div class="tweet-card">推文</div>
<!-- CSS文件 -->
.tweet-card {
padding: 16px;
background-color: white;
border-radius: 8px;
}
Tailwind CSS:
<div class="p-4 bg-white rounded-lg">推文</div>
就像直接贴装修贴纸!
Tailwind CSS的超能力
超能力1:不用切换文件
就像装修时不用跑来跑去:
- 传统:在房间看效果 → 跑到工具房拿油漆 → 跑回来涂
- Tailwind:直接在房间贴贴纸
超能力2:响应式简单
就像不同大小的贴纸:
- 小房间贴小贴纸
- 大房间贴大贴纸
- 一行代码搞定
超能力3:不会冲突
就像贴纸有编号:
- 每个贴纸都有固定的样式
- 不会贴错
- 不会冲突
为什么Vibe Coding选Tailwind CSS?
- 开发速度快 - 不用切换文件
- AI友好 - AI直接生成class名
- 响应式简单 - 一行代码搞定
- 不会冲突 - 预定义的class
记住这些要点
- Tailwind CSS = 装修魔法贴纸
- 不用切换文件(直接在HTML贴)
- 响应式简单(不同大小的贴纸)
- 不会冲突(每个贴纸有固定样式)
下一步
翻到16.5节,认识shadcn/ui - 餐厅的现成家具!