02. 快速开始

xiaotao131

316人浏览 · 2026-03-22 14:16:28

xiaotao131 · 2026-03-22 14:16:28 发布

02. 快速开始

1. 安装方式

Tailwind CSS 有多种安装方式，根据项目类型选择：

方式	适用场景	难度
CDN	快速测试、学习	⭐
Vite + 脚手架	新项目	⭐⭐
PostCSS	现有项目	⭐⭐⭐
CLI	任何项目	⭐⭐

2. 方式一：CDN（最快上手）

适合：快速测试、学习语法

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind 测试</title>
</head>
<body>
  <div class="bg-blue-500 text-white p-4 rounded-lg">
    你好，Tailwind!
  </div>
</body>
</html>

优点：一行代码搞定，立刻使用

缺点：无法自定义主题，生产环境不推荐

3. 方式二：Vite + React（推荐）

适合：React 新项目

步骤 1：创建项目

npm create vite@latest my-app -- --template react
cd my-app

步骤 2：安装 Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

步骤 3：配置 Vite

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

步骤 4：引入 Tailwind

/* src/index.css */
@import "tailwindcss";

步骤 5：使用

// src/App.jsx
function App() {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg">
      你好，Tailwind!
    </div>
  )
}

export default App

步骤 6：运行

npm run dev

4. 方式三：Vite + Vue

适合：Vue 新项目

# 创建项目
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app

# 安装
npm install tailwindcss @tailwindcss/vite

# 配置 vite.config.js（同上）

# 引入样式
/* src/style.css */
@import "tailwindcss";

<!-- src/App.vue -->
<template>
  <div class="bg-blue-500 text-white p-4 rounded-lg">
    你好，Tailwind!
  </div>
</template>

5. 方式四：纯 HTML + PostCSS

适合：纯 HTML/CSS 项目

步骤 1：初始化项目

mkdir my-project
cd my-project
npm init -y

步骤 2：安装依赖

npm install tailwindcss @tailwindcss/cli

步骤 3：创建输入 CSS 文件

/* src/input.css */
@import "tailwindcss";

步骤 4：编译

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

步骤 5：引入编译后的 CSS

<!-- index.html -->
<link href="/dist/output.css" rel="stylesheet">

6. 方式五：CLI 独立使用

适合：任何项目

# 全局安装
npm install -g tailwindcss

# 初始化
tailwindcss init

# 创建输入文件
echo '@import "tailwindcss";' > input.css

# 编译
tailwindcss -i input.css -o output.css --watch

7. 第一个完整示例

创建一个简单的卡片组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>我的第一个 Tailwind 页面</title>
</head>
<body class="bg-gray-100 p-8">

  <!-- 卡片组件 -->
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
    <div class="p-6">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        特色功能
      </div>
      <h2 class="mt-1 text-xl font-medium text-gray-900">
        Tailwind CSS 入门
      </h2>
      <p class="mt-2 text-gray-500">
        在 HTML 里写 CSS，不用离开 HTML，就能快速构建界面。
      </p>
      <button class="mt-4 bg-indigo-500 text-white px-4 py-2 rounded-lg hover:bg-indigo-600 transition-colors">
        开始学习
      </button>
    </div>
  </div>

</body>
</html>

效果预览：

卡片宽度：max-w-md（最大宽度 448px）
居中：mx-auto（左右自动边距）
背景白色、圆角、阴影
内边距 p-6
按钮有悬停效果

8. IDE 插件推荐

VS Code 插件

Tailwind CSS IntelliSense（官方）
- 自动补全类名
- 悬停显示 CSS 效果
- 语法高亮

安装方法

打开 VS Code，按 Ctrl+Shift+X，搜索 Tailwind CSS IntelliSense，点击安装。

效果

<!-- 输入 bg- 会自动弹出所有背景色选项 -->
<div class="bg-">
  <!-- 下拉列表显示：bg-red-500, bg-blue-500, ... -->
</div>

9. 常见问题

Q1: 类名不生效？

A: 检查是否正确引入 Tailwind CSS，查看浏览器控制台是否有报错。

Q2: 如何查看所有可用类名？

官方文档：https://tailwindcss.com/docs
安装 VS Code 插件后，输入类名会自动补全

Q3: CDN 和本地安装有什么区别？

对比	CDN	本地安装
自定义主题	❌ 不支持	✅ 支持
生产优化	❌ 全量	✅ 按需
开发体验	一般	好

10. 练习

练习 1：创建一个登录表单

要求：

居中显示
白色背景、圆角、阴影
包含：邮箱输入框、密码输入框、登录按钮
按钮有悬停效果

参考答案：

<div class="max-w-md mx-auto mt-20 bg-white rounded-lg shadow-lg p-8">
  <h2 class="text-2xl font-bold text-center mb-6">登录</h2>
  <input type="email" placeholder="邮箱" class="w-full p-2 mb-4 border rounded focus:outline-none focus:border-blue-500">
  <input type="password" placeholder="密码" class="w-full p-2 mb-6 border rounded focus:outline-none focus:border-blue-500">
  <button class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition-colors">
    登录
  </button>
</div>

练习 2：创建一个响应式导航栏

要求：

手机版：垂直排列
电脑版：水平排列

参考答案：

<nav class="bg-white shadow-md p-4">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="text-xl font-bold mb-4 md:mb-0">Logo</div>
    <div class="flex flex-col md:flex-row gap-4">
      <a href="#" class="hover:text-blue-500">首页</a>
      <a href="#" class="hover:text-blue-500">关于</a>
      <a href="#" class="hover:text-blue-500">服务</a>
      <a href="#" class="hover:text-blue-500">联系</a>
    </div>
  </div>
</nav>

11. 总结

安装方式	命令/代码	适用场景
CDN	`<script src="https://cdn.tailwindcss.com">`	快速测试
Vite + React	`npm install tailwindcss @tailwindcss/vite`	新 React 项目
Vite + Vue	同上	新 Vue 项目
PostCSS	`npm install tailwindcss @tailwindcss/cli`	纯 HTML 项目