Tailwind的安装，配置，使用步骤

🚀 一、Tailwind 简介

Tailwind CSS 是一种"原子化 CSS"框架。

特点是：

• 不再手写样式文件，而是直接在 class 中写样式类名；
• 可快速构建响应式布局；
• 可自定义主题、颜色、间距、字体等。

---

⚙️ 二、安装与配置

✅ 1. 新建项目

使用 Vite 创建前端项目（推荐）：

# 使用 npm
npm create vite@latest my-project

# 或使用 pnpm
pnpm create vite my-project

进入项目目录：

cd my-project

---

✅ 2. 安装 Tailwind CSS

在项目中安装 Tailwind CSS 和相关工具：

npm install -D tailwindcss postcss autoprefixer

初始化配置文件：

npx tailwindcss init -p

这会自动生成两个文件：

tailwind.config.js
postcss.config.js

---

✅ 3. 配置 tailwind.config.js

修改内容如下：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // 让 Tailwind 扫描这些文件
  ],
  theme: {
    extend: {}, // 可以在这里自定义颜色、字体、间距等
  },
  plugins: [],
}

---

✅ 4. 在 CSS 中引入 Tailwind

打开或新建文件 src/index.css（或 src/style.css），加入以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

---

✅ 5. 在入口文件中导入样式

在 main.js 或 main.tsx 中引入刚才的 CSS 文件：

import './index.css'

---

✅ 6. 启动项目

npm run dev

打开浏览器访问显示的本地地址（通常是 http://localhost:5173），即可使用 Tailwind。

---

🧱 三、简单示例

🔹 示例 1：按钮样式

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  提交
</button>

效果：蓝色圆角按钮，悬停变深。

---

🔹 示例 2：响应式卡片布局

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
  <div class="bg-white shadow-md rounded-lg p-4">卡片1</div>
  <div class="bg-white shadow-md rounded-lg p-4">卡片2</div>
  <div class="bg-white shadow-md rounded-lg p-4">卡片3</div>
</div>

---

🔹 示例 3：全屏居中内容

<div class="flex items-center justify-center h-screen bg-gray-100">
  <h1 class="text-4xl font-bold text-blue-600">Hello Tailwind!</h1>
</div>

---

🎨 四、自定义主题（可选）

在 tailwind.config.js 中扩展主题：

theme: {
  extend: {
    colors: {
      primary: '#2563eb',
      secondary: '#9333ea',
    },
    spacing: {
      128: '32rem',
    },
  },
},

使用自定义颜色：

<div class="bg-primary text-white p-4">自定义主色</div>