TL;DR

Tailwind CSS 是一个实用优先的 CSS 框架，通过在 HTML/JSX 中组合小型、单一用途的工具类来构建设计。JIT（即时）编译器只生成实际使用的 CSS，生产包体积极小。响应式设计通过移动端优先的断点前缀（sm:、md:、lg:、xl:）处理。暗黑模式通过 dark: 前缀实现。Tailwind v4（2025年）切换到 CSS 优先配置模型——不再需要 tailwind.config.js。在 React/Next.js 中，cn() 工具函数对于条件类合并至关重要。Tailwind 最适合希望在统一设计系统下快速开发 UI 而无需编写自定义 CSS 的团队。

核心要点

• Tailwind 是实用优先的——通过在 HTML/JSX 中直接组合 flex、pt-4、text-center 等小型单一用途类来为元素添加样式，而不是编写自定义 CSS。
• JIT（即时）编译器扫描你的源文件，只为实际使用的类生成 CSS——即使对于大型应用，生产包通常也在 10KB 以下。
• 响应式设计使用移动端优先的断点前缀：sm:（640px）、md:（768px）、lg:（1024px）、xl:（1280px）、2xl:（1536px）。无前缀的工具类应用于所有屏幕尺寸。
• 暗黑模式通过 dark: 变体前缀原生支持。可配置基于类（html 上的 class="dark"）或基于媒体查询（prefers-color-scheme）的策略。
• Tailwind v4（2025年）引入了 CSS 优先配置：在 CSS 中导入 Tailwind，以 CSS 自定义属性定义主题，完全消除 tailwind.config.js。
• 在 React/Next.js 中，使用 clsx + tailwind-merge 提供的 cn() 来安全合并条件类，并考虑使用 shadcn/ui 或 cva 构建可复用的类型化组件变体。

/* Traditional CSS approach */
.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  max-width: 24rem;
}

/* Tailwind CSS utility-first approach */
<div class="flex flex-col p-6 bg-white rounded-lg shadow-sm max-w-sm">
  ...
</div>

<!-- No CSS file needed — styles live in the markup -->

<!-- JIT Arbitrary values — any CSS value with square brackets -->
<div class="w-[237px] h-[117px] bg-[#1a73e8] top-[117px]">
  Exact pixel control when needed
</div>

<!-- Arbitrary properties — full CSS escape hatch -->
<div class="[mask-image:linear-gradient(to_bottom,black,transparent)]">
  Fade out effect
</div>

<!-- Opacity modifier (slash syntax) -->
<div class="bg-blue-500/50 text-white/80">
  50% opacity background, 80% opacity text
</div>

<!-- Padding: p-{n} = n * 4px -->
<div class="p-4">       /* padding: 16px all sides */
<div class="px-6 py-3"> /* padding: 12px top/bottom, 24px left/right */
<div class="pt-2 pb-8"> /* padding-top: 8px, padding-bottom: 32px */

<!-- Margin -->
<div class="mx-auto">   /* margin: 0 auto (centering) */
<div class="mt-4 mb-8"> /* margin-top: 16px, margin-bottom: 32px */
<div class="-mt-4">     /* negative margin: margin-top: -16px */

<!-- Arbitrary values -->
<div class="p-[13px] mt-[3.25rem]"> /* exact values */
<div class="w-[calc(100%-2rem)]">    /* CSS calc() support */

<!-- Named palette colors (50 through 950 shades) -->
<p class="text-blue-500">            /* color: #3b82f6 */
<div class="bg-gray-100">            /* background: #f3f4f6 */
<div class="border border-red-300">  /* border: 1px solid #fca5a5 */
<div class="text-emerald-600">       /* color: #059669 */

<!-- Opacity modifier (slash) -->
<div class="bg-blue-500/50">         /* opacity: 0.5 */
<div class="bg-black/10">            /* black at 10% opacity */

<!-- Arbitrary color values -->
<p class="text-[#1a73e8]">           /* exact hex */
<div class="bg-[rgb(59,130,246)]">   /* rgb values */
<div class="border-[hsl(220,90%,56%)]"> /* hsl values */

<!-- Font sizes -->
<p class="text-xs">   /* 12px */
<p class="text-sm">   /* 14px */
<p class="text-base"> /* 16px */
<p class="text-lg">   /* 18px */
<p class="text-xl">   /* 20px */
<p class="text-2xl">  /* 24px */
<h1 class="text-4xl font-bold"> /* 36px, font-weight: 700 */

<!-- Font weight -->
<p class="font-thin">       /* 100 */
<p class="font-normal">     /* 400 */
<p class="font-semibold">   /* 600 */
<p class="font-bold">       /* 700 */
<p class="font-extrabold">  /* 800 */

<!-- Line height, tracking, alignment -->
<p class="leading-relaxed tracking-wide text-center">

<!-- Mobile-first responsive design -->
<!-- No prefix = all screen sizes (mobile) -->
<!-- sm: = 640px+, md: = 768px+, lg: = 1024px+, xl: = 1280px+ -->

<div class="p-2 md:p-4 lg:p-6">
  8px on mobile, 16px on md, 24px on lg
</div>

<p class="text-sm md:text-base lg:text-lg">
  Font grows with screen size
</p>

<!-- Responsive grid: 1 col → 2 cols → 3 cols → 4 cols -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Only visible on md and above</div>
<div class="block md:hidden">Only visible below md</div>

<!-- Centered flex container -->
<div class="flex justify-center items-center min-h-screen">
  Perfectly centered content
</div>

<!-- Navigation bar: logo left, links right -->
<nav class="flex justify-between items-center px-6 py-4">
  <div>Logo</div>
  <div class="flex gap-6">
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </div>
</nav>

<!-- Sidebar layout: sidebar + main content -->
<div class="flex gap-8">
  <aside class="w-64 flex-none">Sidebar</aside>
  <main class="flex-1">Main content grows to fill</main>
</div>

<!-- Vertical stack with equal spacing -->
<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Wrapping tag list -->
<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full">React</span>
  <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full">TypeScript</span>
  <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full">Tailwind</span>
</div>

<!-- Responsive card grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow p-4">Card 1</div>
  <div class="bg-white rounded-lg shadow p-4">Card 2</div>
  <div class="bg-white rounded-lg shadow p-4">Card 3</div>
</div>

<!-- 12-column layout with spanning -->
<div class="grid grid-cols-12 gap-4">
  <aside class="col-span-3">Sidebar (3/12)</aside>
  <main class="col-span-9">Content (9/12)</main>
</div>

<!-- Full-width featured item + 3 cards -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <div class="col-span-2">Featured item (2 cols)</div>
  <div>Card 1</div>
  <div>Card 2</div>
</div>

<!-- Auto-fit columns (CSS subgrid-like) -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
  <!-- Items auto-fill available space -->
</div>

/* tailwind.config.js — v3 dark mode strategy */
module.exports = {
  darkMode: "class",  // or "media"
  // ...
};

<!-- HTML: add "dark" class to html element -->
<html class="dark">

<!-- Component with dark mode variants -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100
            border border-gray-200 dark:border-gray-700
            rounded-lg p-6">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">Title</h2>
  <p class="text-gray-600 dark:text-gray-400">Body text</p>
  <button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700
                 dark:hover:bg-blue-400 text-white px-4 py-2 rounded">
    Action
  </button>
</div>

// Toggle dark mode in JavaScript
function toggleDarkMode() {
  document.documentElement.classList.toggle("dark");
  localStorage.setItem("theme",
    document.documentElement.classList.contains("dark") ? "dark" : "light"
  );
}

Tailwind v4: 在 v4 中，使用 CSS @variant dark (&:where(.dark, .dark *)) 自定义暗黑策略，或使用 @import "tailwindcss" 中内置的 @media (prefers-color-scheme: dark) 变体。

// tailwind.config.js — Tailwind v3
/** @type {import("tailwindcss").Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
        primary: "#6d28d9",
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["Fira Code", "monospace"],
      },
      screens: {
        "3xl": "1920px",  // custom breakpoint
      },
      borderRadius: {
        "4xl": "2rem",
      },
      spacing: {
        "128": "32rem",  // w-128 = 512px
      },
      animation: {
        "fade-in": "fadeIn 0.3s ease-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0", transform: "translateY(-8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/container-queries"),
  ],
};

/* globals.css — Tailwind v4 CSS-first configuration */
@import "tailwindcss";

@theme {
  /* Custom colors — exposed as var(--color-brand-500) */
  --color-brand-50:  #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
  --color-primary:   #6d28d9;

  /* Custom fonts */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", monospace;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;

  /* Custom spacing */
  --spacing-128: 32rem;
}

/* No tailwind.config.js needed! */
/* Custom variants */
@variant dark (&:where(.dark, .dark *));

/* Component styles using @apply */
@layer components {
  .btn-primary {
    @apply bg-brand-500 text-white px-4 py-2 rounded-lg
           hover:bg-brand-600 transition-colors;
  }
}

/* @apply: composing utilities into a CSS class */
@layer components {
  .prose-content h1 {
    @apply text-3xl font-bold text-gray-900 mb-4 mt-8;
  }
  .prose-content p {
    @apply text-gray-700 leading-relaxed mb-4;
  }
}

// Button component with cva (Class Variance Authority)
import { cva, type VariantProps } from "cva";
import { cn } from "@/lib/utils";

const buttonVariants = cva(
  // Base classes
  "inline-flex items-center justify-center rounded-md font-medium
   transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2
   disabled:opacity-50 disabled:pointer-events-none",
  {
    variants: {
      variant: {
        default:     "bg-blue-600 text-white hover:bg-blue-700",
        destructive: "bg-red-600 text-white hover:bg-red-700",
        outline:     "border border-gray-300 bg-white hover:bg-gray-50",
        ghost:       "hover:bg-gray-100 hover:text-gray-900",
        link:        "underline-offset-4 hover:underline text-blue-600",
      },
      size: {
        sm:      "h-8  px-3 text-sm",
        default: "h-10 px-4 py-2",
        lg:      "h-12 px-8 text-lg",
        icon:    "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size }), className)}
      {...props}
    />
  );
}

// Usage — fully typed
<Button variant="outline" size="lg">Click me</Button>
<Button variant="destructive">Delete</Button>

/* Tailwind v4 — New 3D transform utilities */
<div class="rotate-x-45 rotate-y-12 perspective-500">
  3D rotated card
</div>

/* Text shadow and inset shadow (new in v4) */
<h1 class="text-shadow-lg text-shadow-black/20">
  Heading with text shadow
</h1>
<div class="inset-shadow-sm inset-shadow-black/10 rounded-lg">
  Inset shadow container
</div>

/* Container queries — @min and @max variants */
<div class="@container">
  <div class="@min-sm:grid-cols-2 @min-lg:grid-cols-3 grid gap-4">
    Responds to container width, not viewport
  </div>
</div>

/* @starting-style for entry animations */
.toast {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s;

  @starting-style {
    opacity: 0;
    transform: translateY(1rem);
  }
}

# Run the automated migration tool
npx @tailwindcss/upgrade

# Install Tailwind v4 + PostCSS plugin
npm install tailwindcss@next @tailwindcss/postcss@next

/* Before (v3 globals.css) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* After (v4 globals.css) */
@import "tailwindcss";

/* Before (postcss.config.js v3) */
module.exports = {
  plugins: { tailwindcss: {}, autoprefixer: {} },
};

/* After (postcss.config.js v4) */
module.exports = {
  plugins: { "@tailwindcss/postcss": {} },
};

// Key class renames in v4
// shadow-sm   → shadow-xs
// shadow       → shadow-sm
// ring         → ring-1 (ring defaults to 1px now)
// overflow-ellipsis → text-ellipsis
// decoration-slice  → box-decoration-slice

# Create Next.js 14+ project with Tailwind (auto-configured)
npx create-next-app@latest my-app --typescript --tailwind

# Install cn utility dependencies
npm install clsx tailwind-merge

// lib/utils.ts — the cn() utility
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// Usage in a React component
import { cn } from "@/lib/utils";

interface CardProps {
  className?: string;
  highlighted?: boolean;
}

export function Card({ className, highlighted }: CardProps) {
  return (
    <div
      className={cn(
        "rounded-lg border bg-white p-6 shadow-sm",
        highlighted && "border-blue-500 ring-2 ring-blue-500/20",
        className  // consumer can override
      )}
    />
  );
}

# Initialize shadcn/ui in a Next.js + Tailwind project
npx shadcn@latest init

# Add components — code is copied to your project
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

// Usage — fully typed, Tailwind-styled
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardContent } from "@/components/ui/card";

export default function Page() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <h2 className="text-xl font-semibold">Plan</h2>
      </CardHeader>
      <CardContent>
        <p>Includes all features</p>
        <Button variant="default" size="lg" className="w-full mt-4">
          Get Started
        </Button>
      </CardContent>
    </Card>
  );
}

Tailwind CSS 会产生很大的 CSS 包吗？

不会——JIT 编译器只为你实际使用的类生成 CSS。典型的 Tailwind 生产包在 gzip 后是 5-15KB，远小于 Bootstrap（约 22KB）或其他组件框架。未使用类的清除通过扫描内容文件中的类名字符串实现，只为找到的类生成 CSS。Tailwind v4 的引擎效率更高，内容检测也是自动的。

如何处理 Tailwind 中的类冲突（例如同一元素上的 p-4 和 px-2）？

在原始 HTML 中，样式表中的最后一个类优先（不是 HTML 属性中的最后一个类）。在 React 中，使用 tailwind-merge 库（或 clsx + tailwind-merge 提供的 cn() 工具函数）。tailwind-merge 智能解决冲突：cn("p-4 px-2") 结果为 p-4 py-4（px-2 覆盖了 p-4 的水平部分）。在组件库中，当父代码传递可能与内部默认值冲突的 className props 时，这一点尤为重要。

Tailwind CSS 与 PurgeCSS 一起工作吗？

Tailwind v3+ 通过其 JIT 引擎内置了未使用 CSS 的移除——不需要单独配置 PurgeCSS。tailwind.config.js（v3）中的 content 配置或 v4 中的自动检测告诉 Tailwind 扫描哪些文件。Tailwind 的内置清除比 PurgeCSS 对 Tailwind 类更快、更准确，因为它原生理解 Tailwind 类名格式。对于同一项目中的非 Tailwind CSS，仍可在构建管道中使用 PurgeCSS。

可以不使用构建步骤来使用 Tailwind CSS 吗？

可以——Tailwind 提供独立的 CLI 可执行文件和 CDN 版本用于原型开发。CDN 版本（cdn.tailwindcss.com）使用新的 v4 引擎在浏览器中按需生成所有可能的工具类，适合演示和快速原型。但对于生产环境，始终建议使用构建步骤生成最小化的优化 CSS 文件。Vite + Tailwind 集成是新项目最快的构建设置。

如何自定义 Tailwind 的颜色调色板？

在 Tailwind v3 中，在 tailwind.config.js 的 theme.extend.colors 下扩展颜色。可以添加新颜色名称、覆盖现有颜色或添加额外色调。在 Tailwind v4 中，在 @theme 块中将自定义颜色定义为 CSS 自定义属性：--color-brand: #6d28d9 使 brand-500 可用。新的 v4 方法使用原生 CSS 变量，因此自定义颜色也可通过 getComputedStyle 在 JavaScript 中访问。

Tailwind CSS 与手写 CSS 相比对性能有何影响？

就运行时性能而言，Tailwind 生成静态 CSS，没有 JavaScript 开销——与任何静态 CSS 文件一样快。工具类避免了需要 !important 覆盖的优先级问题，使级联管理可预测。对于大型应用，Tailwind 小而一致的 CSS 包实际上比不断增长的定制样式表改善了初始页面加载。设计系统的一致性也减少了随时间增长 CSS 的一次性样式实验的可能性。

@apply 和提取组件有什么区别？

@apply 让你将 Tailwind 工具类组合成 CSS 类。适用于无法修改的第三方 HTML 内容（如 Markdown 输出或 CMS 内容）的样式化。对于你控制的组件（React/Vue/Svelte），提取组件文件几乎总是更好——你可以获得基于 props 的变体、TypeScript 类型、共处的逻辑和更好的 IDE 支持。过度使用 @apply 违背了实用优先 CSS 的目的，可能导致难以维护的 CSS。

2025 年的新项目应该使用 Tailwind CSS v3 还是 v4？

对于 2025 年启动的新项目，使用 Tailwind v4。新的 CSS 优先配置模型更简单，Oxide 引擎速度显著更快，v4 更符合现代 CSS 标准。如果你在现有的 v3 项目上，迁移工具自动处理大多数破坏性变更。生态系统（shadcn/ui、Headless UI、插件）已大量更新支持 v4。留在 v3 的唯一原因是严格依赖尚未更新到 v4 的插件。

Tailwind CSS 赢得最流行的实用优先 CSS 框架的地位是有原因的：编写速度快，调试可预测，可轻松进行 tree-shaking，并且深度可定制。无论是构建简单的落地页还是复杂的 SaaS 仪表盘，Tailwind 的约束强制一致性，而其逃生舱口（任意值、CSS 变量）处理任何边缘情况。Tailwind v4 的 CSS 优先配置和 Oxide 引擎让开发者体验达到了新的速度和简洁水平。Next.js + Tailwind CSS + shadcn/ui + cva 的组合代表了当今最具生产力的 React 样式技术栈。