🌐 全景 ⚡ Next.js ⚛️ React 📘 TypeScript 🗄️ Prisma 🎨 Tailwind 🚀 部署

🎨 Tailwind CSS

不写 .css 文件 · 不纠结类名 · 全写在 className 里

核心定位

不再写 .css 文件，直接在 HTML 的 className 上用原子类控制样式。每个 Tailwind class 对应一个 CSS 属性。

速查表（最常用的）

CSS	Tailwind	说明
`padding: 16px`	`p-4`	数字×4=px
`padding: 32px 0`	`py-8`	y=上下，x=左右
`margin: 0 auto`	`mx-auto`	水平居中
`margin-top: 12px`	`mt-3`	t/b/l/r 方向
`display: flex`	`flex`	—
`flex-wrap: wrap`	`flex-wrap`	—
`align-items: center`	`items-center`	—
`gap: 16px`	`gap-4`	flex/grid 间距
`border-radius: 8px`	`rounded-lg`	sm/md/lg/xl/2xl
`box-shadow`	`shadow-md`	sm/md/lg/xl
`font-size: 18px`	`text-lg`	xs/sm/base/lg/xl/2xl...
`font-weight: 700`	`font-bold`	normal/medium/semibold/bold
`color: #374151`	`text-gray-700`	50~900 色阶
`background: white`	`bg-white`	—
`width: 100%`	`w-full`	—
`max-width: 896px`	`max-w-4xl`	sm/md/lg/xl/4xl/6xl/7xl

修饰符（悬停 / 响应式 / 暗色）

// hover: → 鼠标悬停
<button className="bg-blue-500 hover:bg-blue-600">提交</button>

// md: → 屏幕 ≥768px 时（响应式断点 sm/md/lg/xl）
<div className="w-full md:w-1/2 lg:w-1/3">
//   手机全宽  平板一半    桌面三分之一

// dark: → 暗色模式
<div className="bg-white dark:bg-gray-900 text-black dark:text-white">

商城常用布局

// 商品卡片
<div className="bg-white rounded-xl shadow p-4 hover:shadow-lg transition">
  <h3 className="text-lg font-bold">{name}</h3>
  <p className="text-gray-500 mt-1">¥{price}</p>
</div>

// 商品网格（3 列，手机 1 列）
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {products.map(p => <ProductCard key={p.id} {...p} />)}
</div>

// 导航栏
<header className="flex items-center justify-between p-4 bg-white shadow-sm">
  <div className="text-xl font-bold">我的商城</div>
  <a href="/cart" className="text-gray-600 hover:text-gray-900">购物车</a>
</header>

// 按钮
<button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
  加入购物车
</button>

// 输入框
<input className="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500" />