本文最后更新于7 天前，其中的信息可能已经过时，如有错误请发送邮件到big_fw@foxmail.com

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>