Cao Note

外观

Tailwind CSS ​

概述 ​

Tailwind CSS 是一个 工具优先（Utility-First） 的 CSS 框架。与 Bootstrap 等传统框架不同，它不提供预设的 .btn、.card 等组件类，而是提供数百个细粒度的工具类（如 flex、pt-4、text-center、bg-red-500），让开发者直接在 HTML 中组合实现任何设计。

  • 官网： tailwindcss.com
  • GitHub： 110k+ Star
  • 最新版本： v4（2025 年 1 月发布，Rust 重写 Oxide 引擎）

v3 vs v4 主要变化 ​

特性v3v4
配置方式tailwind.config.jsCSS 优先 — @theme 指令
PostCSS必需不再必需（内置 Rust 引擎）
内容扫描手动 content: []自动检测
插件plugins: [] 配置@plugin CSS 指令
构建引擎JSRust（Oxide）
颜色模型RGBOKLCH（色域扩大 50%）

安装 ​

Vite + React/Vue ​

bash
npm install tailwindcss @tailwindcss/vite
npm install tailwindcss @tailwindcss/vite
ts
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
css
/* src/index.css */
@import "tailwindcss";
/* src/index.css */
@import "tailwindcss";

无需 PostCSS，无需 tailwind.config.js，无需配置 content 路径

Next.js 15 ​

bash
npm install tailwindcss @tailwindcss/postcss
npm install tailwindcss @tailwindcss/postcss
js
// postcss.config.mjs
const config = {
  plugins: { "@tailwindcss/postcss": {} },
}
export default config
// postcss.config.mjs
const config = {
  plugins: { "@tailwindcss/postcss": {} },
}
export default config
css
/* app/globals.css */
@import "tailwindcss";
/* app/globals.css */
@import "tailwindcss";

核心概念：Utility-First ​

传统 CSS vs Tailwind ​

传统方式：

css
.primary-button { background: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; }
.primary-button:hover { background: #2563eb; }
.primary-button { background: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; }
.primary-button:hover { background: #2563eb; }
html
<button class="primary-button">点击</button>
<button class="primary-button">点击</button>

Tailwind 方式：

html
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
  点击
</button>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
  点击
</button>

Utility-First 优势 ​

优势说明
开发速度快无需编写 CSS，HTML 中直接组合
设计一致性颜色、间距、字号统一配置
CSS 极小JIT 只生成用到的类，gzip 后仅 10-15KB
无命名焦虑不用想类名
响应式极简sm:、md:、lg: 前缀控制断点

核心特性 ​

1. 变体（Variants） ​

变体含义示例
sm: md: lg: xl: 2xl:响应式断点md:bg-yellow-400
hover:鼠标悬停hover:bg-blue-700
focus:聚焦focus:ring-2
active:点击激活active:scale-95
dark:深色模式dark:bg-gray-800
group-hover:父元素悬停group-hover:text-white
peer:兄弟元素状态peer-checked:bg-blue-500
max-sm: max-md:小于某断点max-md:flex-col

2. 响应式断点 ​

前缀最小宽度CSS
sm:640px@media (min-width: 640px)
md:768px@media (min-width: 768px)
lg:1024px@media (min-width: 1024px)
xl:1280px@media (min-width: 1280px)
2xl:1536px@media (min-width: 1536px)

移动优先原则： 无前缀 = 移动端，前缀 = 该断点及以上生效

html
<!-- ✅ 正确：移动端居中，sm 及以上左对齐 -->
<div class="text-center sm:text-left"></div>

<!-- 响应式布局 -->
<div class="flex flex-col md:flex-row gap-4"></div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>

<!-- 显示隐藏 -->
<div class="hidden md:block">桌面端显示</div>
<div class="block md:hidden">移动端显示</div>
<!-- ✅ 正确：移动端居中，sm 及以上左对齐 -->
<div class="text-center sm:text-left"></div>

<!-- 响应式布局 -->
<div class="flex flex-col md:flex-row gap-4"></div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>

<!-- 显示隐藏 -->
<div class="hidden md:block">桌面端显示</div>
<div class="block md:hidden">移动端显示</div>

3. 容器查询（Container Queries） ​

v4 原生支持，根据父容器大小而非视口调整样式：

html
<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>
<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

4. CSS 优先配置（v4） ​

css
@import "tailwindcss";

@theme {
  /* 自定义颜色 */
  --color-primary: oklch(0.53 0.12 118.34);
  --color-secondary: #6b7280;

  /* 自定义断点 */
  --breakpoint-sm: 30rem;
  --breakpoint-3xl: 120rem;

  /* 自定义间距 */
  --spacing-section: 5rem;
}

/* 深色模式 */
@variant dark (&:where(.dark, .dark *));

/* 插件 */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* 扫描外部包 */
@source "../../../packages/shared/ui";
@import "tailwindcss";

@theme {
  /* 自定义颜色 */
  --color-primary: oklch(0.53 0.12 118.34);
  --color-secondary: #6b7280;

  /* 自定义断点 */
  --breakpoint-sm: 30rem;
  --breakpoint-3xl: 120rem;

  /* 自定义间距 */
  --spacing-section: 5rem;
}

/* 深色模式 */
@variant dark (&:where(.dark, .dark *));

/* 插件 */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* 扫描外部包 */
@source "../../../packages/shared/ui";

常用工具类 ​

布局 ​

html
<!-- Flex -->
<div class="flex items-center justify-between gap-4"></div>

<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"></div>

<!-- 容器居中 -->
<div class="max-w-4xl mx-auto px-4"></div>
<!-- Flex -->
<div class="flex items-center justify-between gap-4"></div>

<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"></div>

<!-- 容器居中 -->
<div class="max-w-4xl mx-auto px-4"></div>

间距 ​

html
<div class="p-4 m-2"> <!-- padding/margin -->
<div class="space-y-4"> <!-- 子元素纵向间距 -->
<div class="gap-6"> <!-- flex/grid 间距 -->
<div class="p-4 m-2"> <!-- padding/margin -->
<div class="space-y-4"> <!-- 子元素纵向间距 -->
<div class="gap-6"> <!-- flex/grid 间距 -->

排版 ​

html
<p class="text-sm md:text-lg lg:text-xl font-medium leading-relaxed"></p>
<h1 class="text-4xl font-bold tracking-tight"></h1>
<p class="text-sm md:text-lg lg:text-xl font-medium leading-relaxed"></p>
<h1 class="text-4xl font-bold tracking-tight"></h1>

背景与边框 ​

html
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border"></div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500"></div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border"></div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500"></div>

动画与变换 ​

html
<button class="transition-all duration-300 hover:scale-105 active:scale-95"></button>
<div class="animate-spin"></div>
<button class="transition-all duration-300 hover:scale-105 active:scale-95"></button>
<div class="animate-spin"></div>

3D 变换（v4 新增） ​

html
<div class="perspective-800 rotate-x-12 rotate-y-6 transform-3d"></div>
<div class="perspective-800 rotate-x-12 rotate-y-6 transform-3d"></div>

常用组件模式 ​

卡片 ​

html
<div class="max-w-sm rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
  <img class="w-full h-48 object-cover" src="..." alt="">
  <div class="p-6">
    <h3 class="text-xl font-bold mb-2">标题</h3>
    <p class="text-gray-600 mb-4">描述文字</p>
    <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg w-full">
      按钮
    </button>
  </div>
</div>
<div class="max-w-sm rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
  <img class="w-full h-48 object-cover" src="..." alt="">
  <div class="p-6">
    <h3 class="text-xl font-bold mb-2">标题</h3>
    <p class="text-gray-600 mb-4">描述文字</p>
    <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg w-full">
      按钮
    </button>
  </div>
</div>

导航栏 ​

html
<nav class="flex items-center justify-between p-4 bg-white shadow">
  <div class="font-bold text-xl">Logo</div>
  <ul class="hidden md:flex gap-6">
    <li><a href="#" class="hover:text-blue-500">首页</a></li>
    <li><a href="#" class="hover:text-blue-500">关于</a></li>
  </ul>
  <button class="md:hidden p-2">☰</button>
</nav>
<nav class="flex items-center justify-between p-4 bg-white shadow">
  <div class="font-bold text-xl">Logo</div>
  <ul class="hidden md:flex gap-6">
    <li><a href="#" class="hover:text-blue-500">首页</a></li>
    <li><a href="#" class="hover:text-blue-500">关于</a></li>
  </ul>
  <button class="md:hidden p-2">☰</button>
</nav>

多列网格 ​

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

v4 新增特性 ​

特性示例
容器查询@container / @md:flex / @lg:grid-cols-3
3D 变换perspective-distant / rotate-x-51 / transform-3d
渐变变体bg-linear-45 / bg-radial-[...]
起始样式starting:opacity-0（入场动画）
字段自适应field-sizing-content（textarea 自适应）
非变体not-hover: / not-active:
OKLCH 颜色原生 oklch() 颜色空间

与框架集成 ​

React ​

tsx
function Button({ children, primary }) {
  return (
    <button className={`
      px-4 py-2 rounded-lg font-medium transition-colors
      ${primary
        ? 'bg-blue-500 hover:bg-blue-600 text-white'
        : 'bg-gray-200 hover:bg-gray-300 text-gray-800'
      }
    `}>
      {children}
    </button>
  )
}
function Button({ children, primary }) {
  return (
    <button className={`
      px-4 py-2 rounded-lg font-medium transition-colors
      ${primary
        ? 'bg-blue-500 hover:bg-blue-600 text-white'
        : 'bg-gray-200 hover:bg-gray-300 text-gray-800'
      }
    `}>
      {children}
    </button>
  )
}

Vue ​

vue
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div v-for="item in items" :key="item.id"
         class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow">
      {{ item.name }}
    </div>
  </div>
</template>
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div v-for="item in items" :key="item.id"
         class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow">
      {{ item.name }}
    </div>
  </div>
</template>

Tailwind CSS IntelliSense（VS Code） ​

推荐安装 VS Code 插件 Tailwind CSS IntelliSense，提供：

  • 类名补全
  • 悬停预览 CSS
  • 自定义颜色预览
  • 类名排序

参考资料 ​

Copyright © 2024-present xiaocao