Tailwind = 用“类名”直接写样式，而不是写CSS文件
🎨 1. 颜色
bg-blue-500 <!-- 背景 -->
text-white <!-- 文字 -->
border-red-400 <!-- 边框 -->📏 2. 间距
p-4 <!-- 内边距 -->
m-2 <!-- 外边距 -->
px-6 <!-- 左右 -->
py-3 <!-- 上下 -->📐 3. 布局（重点）
flex
items-center
justify-between
gap-4👉 相当于：
display: flex;
align-items: center;
justify-content: space-between;🔠 4. 字体
text-xl
font-bold
text-gray-600📦 5. 尺寸
w-full
h-screen
max-w-md🎭 6. 圆角 & 阴影
rounded-xl
shadow-lg💻 四、实战例子（你能直接用）
👉 做一个卡片
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-xl p-6">
<h2 class="text-xl font-bold mb-2">标题</h2>
<p class="text-gray-600">这是描述内容</p>
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-lg">
点击
</button>
</div>👉 你已经做出一个“UI组件”了
🔥 五、Tailwind 在 Next.js 中怎么用
如果你用的是 👉 Next.js
默认已经集成（或很容易安装）：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p配置文件（重点）
// tailwind.config.js
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};🎨 六、响应式（面试必问🔥）
Tailwind 超强的一点：
👉 直接写断点
<div class="text-sm md:text-lg lg:text-2xl">
自适应文字
</div>意思：
- 手机：小字
- 平板：中等
- 电脑：大字
🎭 七、Hover / 动画（很实用）
<button class="bg-blue-500 hover:bg-blue-600 transition">
按钮
</button>