Glittering's blog

Appearance

一、Tailwind 是什么（核心思想） ​

Utility First（原子化 CSS）

  • 不写（或极少写）传统 CSS
  • 用类名直接描述样式
  • 类名 = 样式语义，而不是业务语义
html
<button class="px-4 py-2 bg-blue-500 text-white rounded">
  Button
</button>

等价于：

css
button {
  padding: 8px 16px;
  background: #3b82f6;
  color: #fff;
  border-radius: 6px;
}

二、核心基础分类 ​

1️⃣ 布局（Layout） ​

display ​

html
<div class="block"></div>
<div class="inline-block"></div>
<div class="flex"></div>
<div class="grid"></div>

Flex（极其常用） ​

html
<div class="flex items-center justify-between">
  • flex-row / flex-col
  • items-center（交叉轴）
  • justify-center / between / around（主轴）

Grid ​

html
<div class="grid grid-cols-3 gap-4">

2️⃣ 间距（Spacing） ​

margin / padding ​

html
<div class="m-4 p-2"></div>
<div class="mt-4 mb-2"></div>
<div class="px-4 py-2"></div>

记忆法：

  • m / p
  • t r b l x y
  • 数字 = 4px * n

3️⃣ 尺寸（Size） ​

html
<div class="w-32 h-16"></div>
<div class="w-full h-screen"></div>
<div class="max-w-md"></div>

常用：

  • w-full
  • h-screen
  • min-h-screen
  • max-w-xl

4️⃣ 文字（Typography） ​

html
<p class="text-sm text-gray-600"></p>
<p class="text-lg font-bold"></p>
<p class="leading-relaxed tracking-wide"></p>
  • text-xs ~ text-2xl
  • font-light / normal / medium / bold
  • text-left / center / right

5️⃣ 颜色（Color） ​

html
<div class="bg-red-500 text-white"></div>
<div class="border border-gray-200"></div>

结构统一：

{property}-{color}-{level}

如：

  • bg-blue-500
  • text-gray-700
  • border-zinc-200

6️⃣ 边框 & 圆角 & 阴影 ​

html
<div class="border rounded-lg shadow-md"></div>
  • rounded / rounded-md / rounded-full
  • shadow / shadow-lg

7️⃣ 定位（Position） ​

html
<div class="relative">
  <span class="absolute top-0 right-0"></span>
</div>
  • relative
  • absolute
  • fixed
  • sticky

三、响应式（Tailwind 很强） ​

断点前缀 ​

txt
sm   ≥640px
md   ≥768px
lg   ≥1024px
xl   ≥1280px
2xl  ≥1536px

用法 ​

html
<div class="text-sm md:text-base lg:text-lg"></div>

📌 移动端优先

四、状态修饰（非常重要） ​

hover / focus / active ​

html
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2">

group（父子联动） ​

html
<div class="group">
  <span class="group-hover:text-red-500"></span>
</div>

五、暗黑模式（Dark Mode） ​

html
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">

tailwind.config.js：

js
darkMode: 'class'

六、常见组合套路（实战） ​

✅ 卡片 ​

html
<div class="p-4 rounded-lg shadow bg-white">

✅ 居中 ​

html
<div class="flex items-center justify-center h-screen">

✅ 按钮 ​

html
<button
  class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
>

七、Tailwind 在 Vue 中的使用要点 ​

1️⃣ 动态 class ​

vue
<div :class="isActive ? 'bg-blue-500' : 'bg-gray-300'"></div>

或：

vue
<div :class="['p-4', isActive && 'bg-blue-500']"></div>

2️⃣ 避免 purge 掉动态类 ​

❌

js
`bg-${color}-500`

✅

js
const map = {
  red: 'bg-red-500',
  blue: 'bg-blue-500'
}

八、什么时候不用 Tailwind？ ​

❌

  • 超复杂动画（建议配合 CSS / GSAP）
  • 大量重复组件却不抽象
  • 对 class 极度敏感的设计师协作

✅

  • 后台 / 中台
  • 组件库
  • 快速原型
  • H5 页面

九、学习顺序建议（给你） ​

  1. Spacing / Flex / Typography
  2. Responsive + 状态修饰
  3. Dark Mode
  4. Tailwind Config（theme / extend）
  5. 组件抽象（@apply / 组件化）

Copyright © 2026