4、使用 Tailwind CSS 美化组件

一课，我们用组件搭建了“个人名片”的骨架，但它现在看起来还很简陋，就像一堆朴素的“水泥块”。

今天，我们就拿起之前在“作战地图”里提到的“标准化精装修工具箱”——Tailwind CSS，来为这些组件进行美化，让我们的名片真正变得漂亮起来。

1. 指挥官的核心任务：描述你想要的样子

使用 Tailwind CSS，你作为“总指挥”的核心任务，不是去写 CSS 代码，而是用清晰的、自然的语言向 AI 描述你想要的视觉效果。AI 非常擅长将你的描述翻译成正确的 Tailwind 功能类。

在指挥 AI 装修之前，你作为“总指挥”，必须先了解我们这个工具箱的原理。

Tailwind 的核心思想是：功能类 (Utility Classes)。

它提供了一大堆“原子化”的、功能单一的“外号”。比如 bg-slate-900 就是一个“深灰色背景”的外号，p-4 就是一个“4号内边距”的外号，font-bold 就是“字体加粗”的外号。

我们需要什么样式，就把对应的“外号”贴到组件的 className 属性上，装修就完成了。代码即样式，所见即所得。

你不需要记住它们！ 你只需要理解这个概念，这样当 AI 生成代码时，你就能看懂它在做什么，知道 className 里的那些“外号”就是我们装修的“指令”。