Tailwind CSS 快速入门与核心用法教程

Tailwind CSS 是一个功能类优先（utility-first）的 CSS 框架，它不提供预设组件，而是提供大量可组合的小型 CSS 类，让你直接在 HTML 中快速构建自定义设计。

一、安装 Tailwind CSS

方式 1：使用 CDN（仅用于快速原型，不支持自定义配置和 JIT 模式）

xml 复制代码

<!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 Demo</title>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

⚠️ 注意：CDN 版本不支持 @apply、自定义主题、插件等高级功能。

方式 2：通过 npm 安装（推荐用于生产项目）

csharp 复制代码

# 初始化项目（如果还没有 package.json）
npm init -y

# 安装依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化 Tailwind 配置文件
npx tailwindcss init -p

配置 `tailwind.config.js`

css 复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

配置入口 CSS 文件（如 `src/input.css`）

less 复制代码

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

构建命令（开发模式）

css 复制代码

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

或配合构建工具（Vite、Webpack、Next.js 等）自动集成。

二、核心用法

1. 布局（Layout）

功能	示例类
显示方式	`block`, `inline`, `flex`, `grid`, `hidden`
容器宽度	`w-full`, `w-1/2`, `max-w-md`
高度	`h-10`, `min-h-screen`
间距（margin/padding）	`m-4`, `p-2`, `mt-6`, `px-4`

xml 复制代码

<div class="flex justify-between items-center p-4 bg-gray-100">
  <span>Logo</span>
  <nav class="space-x-4">
    <a href="#" class="text-blue-500 hover:underline">Home</a>
  </nav>
</div>

2. Flexbox 与 Grid

xml 复制代码

<!-- Flex -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1 bg-red-100">Item 1</div>
  <div class="flex-1 bg-blue-100">Item 2</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <!-- ... -->
</div>

3. 颜色与背景

Tailwind 提供完整的颜色系统（如 blue-500, gray-200）：

ini 复制代码

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

4. 文字样式

功能	示例
字体大小	`text-sm`, `text-lg`, `text-2xl`
字重	`font-normal`, `font-bold`
颜色	`text-gray-700`, `text-red-500`
对齐	`text-center`, `text-left`
行高	`leading-relaxed`

scss 复制代码

<p class="text-lg font-medium text-gray-800 leading-relaxed">
  这是一段说明文字。
</p>

5. 响应式设计（移动端优先）

使用前缀：sm:, md:, lg:, xl:, 2xl:

xml 复制代码

<!-- 默认堆叠，中屏以上并排 -->
<div class="flex flex-col md:flex-row">
  <div class="md:w-1/3">Sidebar</div>
  <div class="md:w-2/3">Content</div>
</div>

断点默认值（可自定义）：

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

6. 伪类与交互状态

Tailwind 支持 hover:, focus:, active:, disabled: 等：

ini 复制代码

<button class="bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-300 ...">
  Submit
</button>

7. 自定义样式（使用 `@apply`）

在 CSS 文件中组合 utility 类：

less 复制代码

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition;
}

然后在 HTML 中使用：

ini 复制代码

<button class="btn-primary">Click</button>

✅ 推荐：仅对重复使用的复杂组件使用 @apply，避免过度抽象。

三、常用技巧

1. 使用 `group` 实现父元素悬停控制子元素

ini 复制代码

<div class="group">
  <h2 class="group-hover:text-blue-500">标题</h2>
  <p class="opacity-0 group-hover:opacity-100">隐藏内容</p>
</div>

2. 使用 `space-x/y` 控制子元素间距

css 复制代码

<div class="flex space-x-4">
  <button>A</button>
  <button>B</button>
</div>

3. 使用 `container` 创建居中容器（需在配置中启用）

yaml 复制代码

// tailwind.config.js
theme: {
  container: {
    center: true,
    padding: '1rem',
  }
}

ini 复制代码

<div class="container mx-auto">内容</div>

四、最佳实践

不要过早抽象 ：先用 utility 类写 UI，重复 3 次以上再考虑 @apply 或组件。
善用 JIT 模式：Tailwind v3+ 默认启用 JIT，按需生成 CSS，体积小、速度快。
结合组件框架：在 React/Vue 中，将常用结构封装为组件，保留 utility 类灵活性。
自定义主题 ：通过 tailwind.config.js 扩展颜色、字体、间距等。

css 复制代码

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#38bdf8',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      }
    }
  }
}

五、学习资源

官网文档：tailwindcss.com
Play CDN 在线编辑器：play.tailwindcss.com
Tailwind UI（付费组件库）：tailwindui.com

✅ 现在你已经掌握了 Tailwind CSS 的核心用法！动手写几个页面，你会爱上这种"所见即所得"的开发体验。

Tailwind CSS 快速入门与核心用法教程