VIBE PROJECTING
登录

Tailwind CSS

技术栈
前端框架
tailwindcssutility-firstresponsivedesign-system前端

概览

Tailwind CSS 技术栈概览

Tailwind CSS 是 Adam Wathan 创建的实用优先（Utility-First）CSS 框架，通过组合原子化 class 直接在 HTML 中构建任意设计，彻底改变了 CSS 的编写方式。

解决什么问题

  • 告别命名痛苦：不用给每个 div 想 class 名，直接用 flex items-center gap-4 描述样式
  • 零上下文切换：在 HTML 里写样式，不需要在 CSS 文件和模板间跳转
  • 设计一致性：内置设计系统（spacing/color/typography scales），保证 UI 统一
  • 生产体积小：Tree-shaking 后只保留用到的 class，通常 <10KB gzip

关键特性

  • Utility-First：p-4 m-2 text-lg bg-blue-500 rounded shadow 语义直观
  • 响应式前缀：sm: / md: / lg: / xl: 断点系统，移动优先
  • Dark Mode：dark: 前缀，一行 class 实现暗色模式
  • JIT 引擎(v3+)：按需生成，开发体验极速，支持任意值 w-[327px]
  • @apply / @layer：可组织自定义样式，不丢失 utility 优势
  • 生态：Tailwind UI / Headless UI / Shadcn UI / DaisyUI / Flowbite

毕设场景

  • 搭配任意前端框架（Vue/React/Svelte）做毕设 UI
  • 快速原型 + 答辩展示（Shadcn UI + Tailwind 开箱即用）
  • 响应式后台面板（无需写 CSS 文件）

安装

Tailwind CSS 安装指南

1. 环境准备

  • Node.js：>= 18.x
  • 前端框架：Vue / React / Svelte / HTML 任意
  • 构建工具：Vite / Next.js / Nuxt / Webpack
  • VS Code 插件：Tailwind CSS IntelliSense（自动补全 + class 预览）

2. 安装命令

方式一：Vite + Tailwind（通用）

# 1. 创建 Vite 项目
npm create vite@latest my-app -- --template react-ts

# 2. 安装 Tailwind
cd my-app
npm install -D tailwindcss @tailwindcss/vite

方式二：Next.js

npx create-next-app@latest my-app --typescript --tailwind
# Tailwind 已内置，无需额外安装

方式三：Nuxt

# Nuxt Tailwind 模块
npx nuxi module add tailwindcss

方式四：SvelteKit

npx sv create my-app
# 选择使用 Tailwind CSS

配置（Vite 项目）

// vite.config.js
import tailwindcss from '@tailwindcss/vite'
export default {
  plugins: [tailwindcss()]
}

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

<!-- 验证 -->
<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>

3. 常见安装问题

Q: Tailwind v4 vs v3？
A: Tailwind v4 使用 @import "tailwindcss" 替代旧的 @tailwind 指令，配置从 JS 移到 CSS。毕设建议用 v4

Q: VSCode 不提示 class？
A: 安装 Tailwind CSS IntelliSense 插件；如用 v4 需升级插件到最新版

Q: 生产体积大？
A: Tailwind 自动 Tree-shake，只有用到的 class 打入生产包，通常 < 10KB gzip

示例

Tailwind CSS 响应式卡片布局

目标

纯 HTML + Tailwind CDN，快速搭建响应式卡片网格。无需 npm、无需构建，零门槛。

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS 卡片</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen p-6">

  <!-- 头部 -->
  <header class="max-w-5xl mx-auto mb-10 text-center">
    <h1 class="text-4xl font-extrabold text-gray-900 mb-2">
      🎨 Tailwind CSS 卡片
    </h1>
    <p class="text-gray-500 text-lg">Utility-First CSS — 在 HTML 里搞定一切样式</p>
  </header>

  <!-- 卡片网格 -->
  <main class="max-w-5xl mx-auto grid gap-6
               grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">

    <!-- 卡片 1 -->
    <div class="bg-white rounded-2xl shadow-md overflow-hidden
                hover:shadow-xl transition-shadow duration-300">
      <div class="h-40 bg-gradient-to-br from-blue-400 to-blue-600
                  flex items-center justify-center">
        <span class="text-white text-5xl">⚡</span>
      </div>
      <div class="p-5">
        <h3 class="font-semibold text-lg text-gray-900 mb-2">极速开发</h3>
        <p class="text-gray-600 text-sm">Utility class 直接在 HTML 中组合，告别 CSS 文件跳转。</p>
        <div class="mt-4 flex items-center gap-2">
          <span class="bg-blue-100 text-blue-700 text-xs px-3 py-1 rounded-full">Vite</span>
          <span class="bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full">零配置</span>
        </div>
      </div>
    </div>

    <!-- 卡片 2 -->
    <div class="bg-white rounded-2xl shadow-md overflow-hidden
                hover:shadow-xl transition-shadow duration-300">
      <div class="h-40 bg-gradient-to-br from-purple-400 to-pink-500
                  flex items-center justify-center">
        <span class="text-white text-5xl">📱</span>
      </div>
      <div class="p-5">
        <h3 class="font-semibold text-lg text-gray-900 mb-2">响应式设计</h3>
        <p class="text-gray-600 text-sm">sm:/md:/lg:/xl: 断点前缀，移动优先，一行搞定适配。</p>
        <div class="mt-4 flex items-center gap-2">
          <span class="bg-purple-100 text-purple-700 text-xs px-3 py-1 rounded-full">Mobile-First</span>
        </div>
      </div>
    </div>

    <!-- 卡片 3 -->
    <div class="bg-white rounded-2xl shadow-md overflow-hidden
                hover:shadow-xl transition-shadow duration-300">
      <div class="h-40 bg-gradient-to-br from-green-400 to-teal-500
                  flex items-center justify-center">
        <span class="text-white text-5xl">🎯</span>
      </div>
      <div class="p-5">
        <h3 class="font-semibold text-lg text-gray-900 mb-2">生产体积小</h3>
        <p class="text-gray-600 text-sm">自动 Tree-shake 未使用的 class，构建后通常 &lt;10KB gzip。</p>
        <div class="mt-4 flex items-center gap-2">
          <span class="bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full">Tree-Shake</span>
          <span class="bg-orange-100 text-orange-700 text-xs px-3 py-1 rounded-full">&lt;10KB</span>
        </div>
      </div>
    </div>

  </main>

  <!-- 特性对比表 -->
  <section class="max-w-3xl mx-auto mt-12">
    <h2 class="text-2xl font-bold text-gray-900 mb-4 text-center">断点系统</h2>
    <div class="overflow-hidden rounded-xl border border-gray-200">
      <table class="w-full text-sm">
        <thead class="bg-gray-100">
          <tr>
            <th class="p-3 text-left">前缀</th>
            <th class="p-3 text-left">最小宽度</th>
            <th class="p-3 text-left">适用设备</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-t"><td class="p-3 font-mono">无</td><td class="p-3">0px</td><td class="p-3">手机</td></tr>
          <tr class="border-t"><td class="p-3 font-mono">sm:</td><td class="p-3">640px</td><td class="p-3">大屏手机</td></tr>
          <tr class="border-t"><td class="p-3 font-mono">md:</td><td class="p-3">768px</td><td class="p-3">平板</td></tr>
          <tr class="border-t"><td class="p-3 font-mono">lg:</td><td class="p-3">1024px</td><td class="p-3">笔记本</td></tr>
          <tr class="border-t"><td class="p-3 font-mono">xl:</td><td class="p-3">1280px</td><td class="p-3">桌面</td></tr>
        </tbody>
      </table>
    </div>
  </section>

</body>
</html>

运行

直接在浏览器打开 HTML 文件即可，无需任何构建工具。

预期输出

  • 3 列响应式卡片：手机 1 列、平板 2 列、桌面 3 列
  • 渐变背景、悬停阴影、圆角标签
  • 断点参考表

教程

Tailwind CSS Utility-First 思维

背景

传统 CSS 需要给每个元素取 class 名、写 CSS 文件、维护样式表。Tailwind 颠覆了这个模式：用原子化 class 直接在 HTML 中描述样式，大幅提升开发效率。

核心概念

1. Utility-First 哲学

传统 CSS 写法：

/* 需要命名、跳文件、维护 */
.card { background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; }
.card-title { font-size: 1.25rem; font-weight: 600; }

Tailwind 写法：

<!-- 直接在 HTML 中描述样式，所见即所得 -->
<div class="bg-white rounded-xl shadow-md p-5">
  <h3 class="text-xl font-semibold">卡片标题</h3>
</div>

2. 设计系统（Design Tokens）

Tailwind 内置了精心设计的设计令牌，保证一致性：

类别 示例 class
间距 p-4(1rem), m-2(0.5rem), gap-6(1.5rem)
颜色 text-blue-500, bg-gray-100, border-red-300
字号 text-xs → text-9xl
圆角 rounded, rounded-xl, rounded-full
阴影 shadow-sm, shadow-md, shadow-xl

3. 响应式设计

<!-- 移动优先：从小到大覆盖 -->
<div class="
  grid
  grid-cols-1        <!-- 手机：1列 -->
  sm:grid-cols-2     <!-- ≥640px：2列 -->
  lg:grid-cols-3     <!-- ≥1024px：3列 -->
  xl:grid-cols-4     <!-- ≥1280px：4列 -->
">

4. 伪类与状态

<button class="
  bg-blue-500 text-white px-4 py-2 rounded
  hover:bg-blue-600           <!-- 悬停 -->
  focus:ring-2 focus:ring-blue-300  <!-- 聚焦 -->
  active:scale-95             <!-- 按下 -->
  disabled:opacity-50         <!-- 禁用 -->
  dark:bg-blue-700            <!-- 暗色模式 -->
">
  提交
</button>

5. 与组件库集成

Tailwind 本身无组件，但可以和以下搭配：

方案 适用框架
Shadcn UI React/Vue
Headless UI React/Vue
DaisyUI 任意
Flowbite 任意
Nuxt UI Nuxt

6. 任意值语法（v3.3+）

<!-- 不用配置，直接写自定义值 -->
<div class="w-[327px] h-[180px] bg-[#FF6B6B] text-[13px]">
</div>

分步操作

# 在任何 Vite 项目中安装
npm install -D tailwindcss @tailwindcss/vite

/* src/index.css — 只需一行 */
@import "tailwindcss";

思考题

  1. Tailwind 的 "Tree-Shaking" 如何工作？为什么生产包很小？
  2. 什么场景不适合用 Tailwind？
  3. 如何用 @layer 组织自定义样式？

毕设搭配推荐

框架 Tailwind 集成方案
React Shadcn UI / Headless UI
Vue Nuxt UI / Headless UI
Svelte Skeleton UI / 原生
纯 HTML CDN 引入