Tailwind CSS 4.0 完整指南：从入门到精通

一、引言

Tailwind CSS 是当今最受欢迎的原子化 CSS 框架之一，它彻底改变了前端开发者编写样式的方式。2024 年，Tailwind Labs 发布了 Tailwind CSS 4.0，这是一个里程碑式的重大版本更新。Tailwind CSS 4.0 代表了框架从 JavaScript 配置向纯 CSS 配置的重大转变，同时带来了显著的性能提升和更现代化的开发体验。

Tailwind CSS 4.0 的设计目标是支持 Safari 16.4+、Chrome 111+ 和 Firefox 128+ 等现代浏览器。这意味着框架充分利用了最新的 CSS 特性，如 @property 和 color-mix() 函数，从而实现更强大和更高效的功能。Tailwind CSS 4.0 不仅仅是一次简单的版本迭代，更是对整个 CSS 开发范式的重新思考和革新。

在过去的几年中，CSS 语言本身发生了巨大的变化。原生 CSS 变量（自定义属性）、强大的容器查询、现代颜色函数等新特性的出现，使得许多原本需要 JavaScript 辅助的功能现在可以直接在 CSS 中实现。Tailwind CSS 4.0 正是抓住了这一机遇，将框架与现代 CSS 标准深度融合，为开发者提供了一种更加自然、更加高效的样式编写方式。

Tailwind CSS 4.0 的核心改进包括：完全重写的引擎架构、简化的配置方式、显著的性能提升、增强的开发者体验，以及对现代 CSS 特性的全面支持。这些改进使得 Tailwind CSS 4.0 不仅保持了其原有的优势，还解决了许多长期困扰开发者的问题。无论你是 Tailwind CSS 的老用户，还是刚刚接触这个框架的新手，Tailwind CSS 4.0 都将为你带来前所未有的开发体验。

二、新特性概览

2.1 CSS 优先配置

Tailwind CSS 4.0 引入了一种全新的配置方式------CSS 优先配置。在之前的版本中，开发者通常需要在一个 JavaScript 文件（通常是 tailwind.config.js）中定义主题、颜色、间距等配置。这种方式虽然灵活，但也带来了额外的构建复杂性和学习成本。Tailwind CSS 4.0 完全改变了这一范式，允许开发者直接在 CSS 文件中使用原生 CSS 变量和 @theme 指令来定义和定制主题。

这种 CSS 优先的配置方式带来了诸多好处。首先，它消除了对额外配置文件的需求，让样式定义更加集中和直观。其次，它利用了浏览器原生支持的 CSS 变量，使得主题值可以在运行时动态调整，无需重新编译。此外，这种方式与现代 CSS 工作流更加契合，开发者可以使用任何他们熟悉的 CSS 预处理工具或原生 CSS 编写方式。

在 Tailwind CSS 4.0 中，你可以通过以下方式定义主题：

css 复制代码

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --color-brand-50: #f0f9ff;
  --color-brand-100: #e0f2fe;
  --color-brand-200: #bae6fd;
  --color-brand-500: #0ea5e9;
  --color-brand-600: #0284c7;
  --color-brand-700: #0369a1;
  --breakpoint-3xl: 120rem;
  --spacing-128: 32rem;
}

这种配置方式不仅简洁明了，而且完全兼容原生 CSS 的任何功能。你可以自由地使用 CSS 变量计算、媒体查询、容器查询等所有现代 CSS 特性来定义你的主题。Tailwind CSS 4.0 会自动扫描你的 CSS 文件，识别 @theme 块中定义的变量，并生成相应的工具类。这种声明式的配置方式使得主题定义变得更加声明式和可维护。

2.2 性能优化

Tailwind CSS 4.0 在性能方面实现了质的飞跃。根据官方基准测试，新版本在编译速度上比 v3 快约 25 倍，在开发服务器启动时间上快约 5 倍。这一显著的性能提升主要得益于全新的引擎架构和对现代浏览器特性的充分利用。

新引擎采用了增量编译策略，只处理发生变化的文件和类名，而不是每次都重新扫描整个项目。这意味着当你修改一个组件的样式时，Tailwind CSS 4.0 只需要更新相关的 CSS 输出，而不需要重新生成整个样式表。对于大型项目来说，这种优化可以节省大量的开发时间。

Tailwind CSS 4.0 还引入了一种全新的类名检测机制，使用 Rust 编写的高性能扫描器可以更快速地分析 HTML 模板和 JavaScript 文件，识别出实际使用的工具类。这种机制不仅提高了编译速度，还减少了最终生成的 CSS 文件大小，因为它可以更精确地确定哪些工具类真正被项目使用。

在生产构建方面，Tailwind CSS 4.0 使用了更高效的 CSS 生成算法，生成的 CSS 文件通常比 v3 版本小 10% 到 20%。这是因为新引擎可以更好地识别和消除未使用的样式，同时利用现代 CSS 特性的组合能力来减少重复代码。此外，新版本还支持 CSS 变量的智能内联，可以在保持开发体验的同时优化生产构建的体积。

2.3 现代浏览器支持

Tailwind CSS 4.0 专为现代浏览器设计，充分利用了 CSS 的最新特性。这种设计决策使得框架可以摆脱对旧版浏览器的兼容负担，从而提供更强大、更简洁的功能集。以下是 Tailwind CSS 4.0 所依赖的主要现代 CSS 特性。

@property 是 CSS Houdini API 的一部分，它允许开发者定义自定义属性的类型、继承行为和默认值。Tailwind CSS 4.0 使用 @property 来注册颜色、间距、字体大小等工具类对应的 CSS 变量，这使得这些变量可以支持过渡动画、计算颜色等高级功能。

color-mix() 函数是 CSS Color Level 4 规范中引入的一个强大功能，它允许在运行时混合两种颜色。Tailwind CSS 4.0 使用 color-mix() 来实现透明度修饰符（如 bg-red-500/50），这比之前的实现方式更加简洁和高效。

容器查询（Container Queries）是响应式设计的一个重要补充，它允许元素根据其父容器的尺寸而不是视口尺寸来调整样式。Tailwind CSS 4.0 完全支持容器查询，并提供了一组新的 @ 工具类来配合 @container 使用。

三、安装与配置

3.1 使用 Vite 安装

对于现代前端项目，Vite 是一个优秀的构建工具选择。Tailwind CSS 4.0 提供了官方的 Vite 插件，可以实现无缝集成和最佳的开发体验。以下是使用 Vite 和 Tailwind CSS 4.0 搭建项目的完整步骤。

首先，确保你的 Node.js 版本不低于 20。然后创建一个新的 Vite 项目：

bash 复制代码

npm create vite@latest my-project -- --template vue-ts
cd my-project

接下来，安装 Tailwind CSS 4.0 和相关的 Vite 插件：

bash 复制代码

npm install tailwindcss @tailwindcss/vite

然后，在你的 vite.config.ts 文件中配置 Tailwind CSS：

typescript 复制代码

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import vue from "@vitejs/plugin-vue";

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

最后，在你的主 CSS 文件（通常是 src/style.css 或 src/main.css）中引入 Tailwind CSS：

css 复制代码

@import "tailwindcss";

这样，你就完成了 Tailwind CSS 4.0 的基本配置。现在你可以开始在项目中使用 Tailwind 的所有工具类了。Vite 会自动处理 Tailwind CSS 的编译和优化，你只需要专注于编写代码即可。

3.2 使用 PostCSS 安装

如果你的项目使用的是其他构建工具或者自定义的 PostCSS 配置，你仍然可以使用 Tailwind CSS 4.0。Tailwind CSS 4.0 提供了一个官方的 PostCSS 插件，可以轻松集成到现有的工作流中。

首先，安装 Tailwind CSS 4.0 和 PostCSS 插件：

bash 复制代码

npm install tailwindcss @tailwindcss/postcss

然后，在你的 postcss.config.js 或 postcss.config.mjs 文件中配置插件：

javascript 复制代码

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

在你的 CSS 文件中引入 Tailwind CSS：

css 复制代码

@import "tailwindcss";

值得注意的是，在 Tailwind CSS 4.0 中，你不再需要 postcss-import、autoprefixer 或 tailwindcss（旧版插件）。@tailwindcss/postcss 插件已经内置了这些功能，可以自动处理 CSS 导入和浏览器前缀添加。这大大简化了 PostCSS 配置，减少了依赖项数量。

3.3 使用 Tailwind CLI

对于简单的项目或者不想使用完整构建工具的场景，你可以直接使用 Tailwind CSS 4.0 提供的命令行工具。Tailwind CSS CLI 是一个独立的可执行文件，可以快速地将 Tailwind CSS 编译成普通的 CSS 文件。

首先，安装 CLI 工具：

bash 复制代码

npm install -D @tailwindcss/cli

然后，你可以使用 CLI 工具来编译 CSS：

bash 复制代码

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

你也可以创建一个 package.json 脚本来简化这个过程：

json 复制代码

{
  "scripts": {
    "build:css": "@tailwindcss/cli -i ./src/input.css -o ./dist/output.css",
    "dev:css": "@tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch"
  }
}

Tailwind CSS CLI 还支持配置文件。如果你需要自定义主题，可以在 CSS 文件中使用 @theme 指令，或者使用 --config 参数指定一个单独的配置文件。

四、核心概念与用法

4.1 工具类基础

Tailwind CSS 的核心思想是提供大量的、细粒度的工具类，让开发者可以直接在 HTML 中组合使用这些类来构建界面。这种原子化的方法与传统 CSS 方法（如 BEM）形成了鲜明对比，后者通常需要为每个组件编写大量的自定义 CSS。

Tailwind CSS 4.0 提供了以下主要类别的工具类：

布局类 ：控制元素的显示模式、位置、尺寸、对齐方式等。包括 flex、grid、absolute、relative、fixed、sticky、z-index、top、right、bottom、left 等。

间距类 ：控制元素的内边距和外边距。格式为 <属性><方向>-<尺寸>，如 p-4（所有方向的内边距）、mt-2（上边距）、mx-auto（水平方向自动边距）、gap-3（网格间隙）等。

尺寸类 ：控制元素的宽度和高度。包括 w-*、h-*、min-w-*、max-w-*、min-h-*、max-h-* 等，如 w-full、h-screen、max-w-4xl 等。

颜色类 ：控制文本颜色、背景颜色、边框颜色等。包括 text-*、bg-*、border-*、decoration-*、accent-* 等，支持通过斜杠语法添加透明度，如 bg-red-500/50、text-black/75 等。

排版类 ：控制文本的各种属性。包括 font-*、text-*、leading-*、tracking-*、whitespace-*、break-* 等，如 font-bold、text-lg、leading-relaxed、tracking-wide 等。

边框类 ：控制边框的宽度、颜色、样式和圆角。包括 border-*、rounded-*、divide-* 等，如 border-2、rounded-lg、divide-y 等。

效果类 ：控制阴影、透明度、混合模式、滤镜等。包括 shadow-*、opacity-*、mix-blend-*、blur-*、brightness-* 等。

动画类 ：控制过渡效果和动画。包括 transition-*、animate-* 等，如 transition-all、animate-spin、animate-pulse 等。

4.2 响应式设计

Tailwind CSS 4.0 提供了完整的响应式设计支持，允许你根据不同的视口宽度应用不同的样式。响应式工具类使用前缀 sm:、md:、lg:、xl:、2xl: 来分别对应不同的断点。

默认的断点配置如下：

前缀	最小宽度	典型设备
`sm`	640px	小型平板手机
`md`	768px	大型平板手机
`lg`	1024px	笔记本电脑
`xl`	1280px	台式电脑
`2xl`	1536px	大型台式电脑

使用响应式工具类时，样式只会在满足条件时生效。例如：

html 复制代码

<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  这个文本在不同屏幕尺寸下会有不同的大小
</div>

在默认情况下（移动端），文本大小为 text-sm（0.875rem）。当视口宽度达到 768px 或更大时，文本大小变为 text-base（1rem）。依此类推，直到 xl 断点时变为 text-xl（1.25rem）。

Tailwind CSS 4.0 还支持自定义断点。你可以在 @theme 块中定义自己的断点：

css 复制代码

@theme {
  --breakpoint-3xl: 120rem;
}

然后你就可以使用 3xl: 前缀来针对超大型屏幕应用样式。

Tailwind CSS 4.0 的响应式工具类遵循移动优先的设计原则。这意味着你定义的默认样式会应用于所有屏幕尺寸，而带有断点前缀的样式会作为增强，在更大的屏幕上生效。这种方法符合现代网页设计最佳实践，确保你的网站在移动设备上也能良好显示。

4.3 状态变体

状态变体允许你根据元素的不同状态应用不同的样式。Tailwind CSS 4.0 支持丰富的状态变体，包括交互状态、表单状态、媒体状态等。

交互状态：

hover: - 鼠标悬停状态
focus: - 获得焦点状态
active: - 激活状态（如按钮被按下）
visited: - 已访问链接状态

html 复制代码

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
  点击我
</button>

表单状态：

disabled: - 禁用状态
required: - 必填状态
checked: - 选中状态（复选框、单选框）
invalid: - 无效状态

html 复制代码

<input 
  type="email" 
  class="border-gray-300 focus:border-blue-500 focus:ring-blue-500 disabled:bg-gray-100"
  required
/>

其他状态：

first: - 第一个子元素
last: - 最后一个子元素
odd: - 奇数子元素
even: - 偶数子元素
empty: - 空内容元素
in-range: - 输入值在范围内
out-of-range: - 输入值超出范围

html 复制代码

<ul class="divide-y">
  <li class="py-2 first:pt-0 last:pb-0 odd:bg-gray-50 even:bg-white">
    项目 1
  </li>
  <li class="py-2 first:pt-0 last:pb-0 odd:bg-gray-50 even:bg-white">
    项目 2
  </li>
</ul>

4.4 暗色模式

Tailwind CSS 4.0 提供了便捷的暗色模式支持。使用 dark: 前缀可以定义在暗色模式下生效的样式：

html 复制代码

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  白天和夜晚显示不同的颜色
</div>

Tailwind CSS 4.0 使用 media 策略来检测暗色模式偏好（默认行为），这意味着暗色模式会根据操作系统的设置自动切换。如果你希望提供手动控制的能力，可以切换到 selector 策略：

css 复制代码

@theme {
  --color-dark-bg: #1a1a1a;
}

.dark {
  color-scheme: dark;
}

然后在 HTML 中添加 class="dark" 到 html 或 body 元素来启用暗色模式。

五、主题定制

5.1 使用 @theme 指令

Tailwind CSS 4.0 引入了一个全新的主题定制方式------@theme 指令。这种方式允许你直接在 CSS 文件中定义和定制主题，完全摆脱了对 JavaScript 配置文件的依赖。

@theme 指令可以定义以下类型的变量：

颜色变量 ：使用 --color-<name> 格式定义颜色。

css 复制代码

@theme {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
}

间距变量 ：使用 --spacing-<name> 格式定义间距。

css 复制代码

@theme {
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;
  --spacing-30: 7.5rem;
}

字体大小变量 ：使用 --font-size-<name> 格式定义字体大小。

css 复制代码

@theme {
  --font-size-display: clamp(2.5rem, 5vw, 5rem);
  --font-size-h1: clamp(2rem, 4vw, 3.75rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2.5rem);
}

圆角变量 ：使用 --radius-<name> 格式定义圆角大小。

css 复制代码

@theme {
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
}

断点变量 ：使用 --breakpoint-<name> 格式定义响应式断点。

css 复制代码

@theme {
  --breakpoint-3xl: 120rem;
  --breakpoint-4xl: 160rem;
}

动画变量 ：使用 --animate-<name> 格式定义动画。

css 复制代码

@theme {
  --animate-bounce-slow: bounce 2s infinite;
  --animate-fade-in: fadeIn 0.5s ease-out;
  --animate-slide-up: slideUp 0.3s ease-out;
}

Tailwind CSS 4.0 会自动将 @theme 中定义的变量转换为相应的工具类。例如，定义 --color-primary-500 后，你就可以使用 bg-primary-500、text-primary-500 等工具类。

5.2 扩展默认主题

除了完全重写主题，你还可以扩展 Tailwind CSS 的默认主题。这种方式保留了所有预设的工具类，同时添加你自己的自定义工具类。

css 复制代码

@theme {
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.15 117.08);
  --color-avocado-500: oklch(0.87 0.18 118.82);
  
  --font-display: "Satoshi", "sans-serif";
  --font-body: "Inter", "sans-serif";
}

扩展默认主题的好处是你可以渐进式地添加自定义样式，而不需要一次性替换所有内容。这对于维护大型项目或与团队协作时特别有用。

5.3 使用 CSS 变量

Tailwind CSS 4.0 完全支持 CSS 变量，你可以在任何地方使用 CSS 变量来定义主题值：

css 复制代码

@theme {
  --color-brand: var(--brand-color);
  --spacing-container: var(--container-padding);
  --font-size-base: var(--base-size, 1rem);
}

CSS 变量的一个强大特性是支持回退值。如果某个变量未定义，可以使用第二个参数作为默认值：

css 复制代码

font-size: var(--font-size-xl, 1.25rem);

你还可以使用 calc() 函数与 CSS 变量结合：

css 复制代码

@theme {
  --spacing-128: calc(var(--spacing-32) * 4);
}

Tailwind CSS 4.0 会自动识别并处理这些变量用法，确保生成的工具类正确引用这些 CSS 变量。

六、从 v3 升级指南

6.1 主要变更概览

Tailwind CSS 4.0 虽然带来了许多改进，但也包含了一些不兼容的变更。对于从 v3 升级的项目，了解这些变更是成功迁移的关键。以下是 v3 到 v4 的主要变更概览。

移除的 @tailwind 指令 ：v4 使用标准的 @import "tailwindcss" 替代了 @tailwind base、@tailwind components 和 @tailwind utilities 指令。

移除的废弃工具类 ：v4 移除了所有在 v3 中已废弃的工具类，包括 bg-opacity-*、text-opacity-*、border-opacity-*、flex-shrink-*、flex-grow-* 等。这些应该使用透明度修饰符替代，如 bg-red-500/50。

重命名的工具类 ：多个工具类被重命名以保持一致性和可预测性，如 shadow-sm 改为 shadow-xs、rounded-sm 改为 rounded-xs、blur-sm 改为 blur-xs 等。

引入的重要修饰符语法变更 ：v4 中重要修饰符 ! 应该放在类名的最后，如 class="flex! bg-red-500!" 而不再是 class="!flex bg-red-500"。

变更的选择器 ：space-x-*、space-y-*、divide-x-* 和 divide-y-* 的选择器从 > :not([hidden]) ~ :not([hidden]) 改为 > :not(:last-child)，这解决了大型页面的性能问题。

6.2 使用升级工具

Tailwind Labs 提供了一个官方升级工具，可以自动处理大部分迁移工作。这个工具可以更新依赖项、迁移配置文件、修改模板文件等，大大简化了升级过程。

使用升级工具非常简单，只需在项目根目录运行以下命令：

bash 复制代码

npx @tailwindcss/upgrade

运行该命令前，请确保：

Node.js 版本不低于 20
项目已经初始化了 Git（建议在新的分支上运行）
所有依赖项已经安装

升级工具会执行以下操作：

更新 package.json 中的 Tailwind CSS 相关依赖
将 tailwind.config.js 转换为 CSS 配置
更新 CSS 文件中的 @tailwind 指令
修改模板文件中的废弃用法

升级完成后，你需要：

仔细检查工具生成的 diff
在浏览器中测试项目
手动修复任何工具未处理的问题

6.3 手动升级步骤

如果升级工具无法满足你的需求，或者你更喜欢手动控制升级过程，可以按照以下步骤进行手动升级。

第一步：更新依赖

bash 复制代码

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss @tailwindcss/postcss

第二步：更新 CSS 文件

将：

css 复制代码

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

改为：

css 复制代码

@import "tailwindcss";

第三步：迁移配置文件

将 tailwind.config.js 中的配置迁移到 CSS 文件的 @theme 块中。例如：

javascript 复制代码

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
        },
      },
      fontFamily: {
        display: ['Satoshi', 'sans-serif'],
      },
    },
  },
};

迁移为：

css 复制代码

@theme {
  --color-brand-50: #f0f9ff;
  --color-brand-500: #0ea5e9;
  --font-display: "Satoshi", "sans-serif";
}

第四步：更新工具类使用

根据前面提到的变更列表，更新项目中使用的工具类。

第五步：测试和验证

运行项目，确保所有样式正确显示。注意检查：

响应式断点是否正常工作
状态变体是否正确应用
自定义主题是否正确应用
暗色模式是否正常切换

6.4 常见问题与解决方案

问题一：升级后样式丢失

这通常是因为 @theme 配置不正确或 CSS 导入路径错误。检查 @theme 块中的变量名是否正确，确保所有自定义颜色、间距等都有对应的变量定义。

问题二：PostCSS 配置错误

如果你使用的是自定义 PostCSS 配置，确保只使用 @tailwindcss/postcss 插件，移除 tailwindcss（旧版插件）和 autoprefixer。新插件已经内置了这些功能。

问题三：JavaScript 配置文件不生效

在 v4 中，JavaScript 配置文件不再是自动检测的。如果你仍然需要使用 tailwind.config.js，必须在 CSS 文件中显式引用它：

css 复制代码

@config "../../tailwind.config.js";

问题四：工具类不工作

Tailwind CSS 4.0 需要扫描你的 HTML 模板和 JavaScript 文件来检测使用的工具类。确保你的构建配置包含了正确的扫描路径。大多数情况下，默认配置应该能正常工作，但如果你有特殊的目录结构，可能需要手动配置扫描路径。

七、高级功能

7.1 自定义工具类

Tailwind CSS 4.0 提供了 @utility 指令，允许你创建完全自定义的工具类。这对于添加 Tailwind CSS 没有内置的功能特别有用。

创建自定义工具类：

css 复制代码

@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility text-balance {
  text-wrap: balance;
}

@utility truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

使用自定义工具类：

html 复制代码

<div class="scrollbar-hide text-balance">
  这是一个长文本段落
</div>

Tailwind CSS 4.0 的自定义工具类会自动获得完整的变体支持：

html 复制代码

<button class="hover:truncate-2-lines">
  悬停时截断文本
</button>

7.2 自定义变体

Tailwind CSS 4.0 允许你使用 @custom-variant 指令创建自己的变体。这在处理复杂的交互逻辑时特别有用。

css 复制代码

@custom-variant group-hover (&:where(:has(.group:hover)));

@custom-variant disabled (&:where(:disabled, [disabled]));

使用自定义变体：

html 复制代码

<div class="group">
  <button class="group-hover:bg-blue-500">
    悬停父元素时改变样式
  </button>
</div>

<input type="text" class="disabled:opacity-50" disabled />

你还可以基于媒体查询或功能查询创建变体：

css 复制代码

@custom-variant landscape (@media (orientation: landscape));

@custom-variant reduced-motion (@media (prefers-reduced-motion: reduce));

7.3 容器查询

Tailwind CSS 4.0 完全支持 CSS 容器查询，这是一种强大的响应式设计技术，允许组件根据其容器尺寸而不是视口尺寸来调整样式。

首先，需要将元素标记为容器：

html 复制代码

<div class="@container">
  <div class="bg-white p-4 @lg:bg-blue-100 @xl:bg-blue-200">
    根据容器尺寸改变背景
  </div>
</div>

容器查询断点使用 @ 前缀，这与普通的响应式断点（使用 : 前缀）形成对比：

html 复制代码

<div class="@container">
  <div class="text-sm @md:text-base @lg:text-lg">
    在容器宽度达到 md 断点时增大文本
  </div>
</div>

容器查询特别适用于创建可复用的组件库，这些组件可以在不同的上下文中正常工作，无论它们被放置在多大的容器中。

7.4 颜色函数

Tailwind CSS 4.0 充分利用了现代 CSS 颜色函数，特别是 color-mix() 函数，这使得颜色操作变得更加灵活和强大。

使用 color-mix() 直接在 CSS 中混合颜色：

css 复制代码

@theme {
  --color-mixed: color-mix(in oklch, var(--color-blue-500), var(--color-red-500) 50%);
}

使用 CSS 变量与 Tailwind 颜色混合：

html 复制代码

<div class="bg-[color-mix(in_oklch,var(--color-blue-500),var(--color-red-500)30%)]">
  使用颜色混合的背景
</div>

Tailwind CSS 4.0 的透明度修饰符实际上是建立在 color-mix() 基础上的：

html 复制代码

<div class="bg-red-500/50">
  相当于 bg-red-500 添加 50% 透明度
</div>

7.5 过渡和动画增强

Tailwind CSS 4.0 提供了更强大的过渡和动画支持，允许你创建更加流畅和复杂的交互效果。

动画关键帧：

css 复制代码

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@theme {
  --animate-fade-in: fade-in 0.5s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
  --animate-slide-down: slide-down 0.3s ease-out;
}

使用动画：

html 复制代码

<div class="animate-fade-in animate-slide-up">
  元素将同时应用淡入和上滑动画
</div>

过渡增强：

html 复制代码

<button class="transition-all duration-300 ease-in-out hover:scale-105 active:scale-95">
  带有平滑过渡效果的按钮
</button>

Tailwind CSS 4.0 还支持自定义过渡属性：

css 复制代码

@theme {
  --transition-all-properties: all;
  --transition-colors-properties: background-color, border-color, color, fill, stroke;
  --transition-opacity-properties: opacity;
  --transition-shadow-properties: box-shadow;
  --transition-transform-properties: transform;
}

八、最佳实践

8.1 项目结构组织

良好的项目结构是维护大型 Tailwind CSS 项目的基础。以下是推荐的项目组织方式：

CSS 文件结构：

css 复制代码

/* src/styles/main.css */
@import "tailwindcss";

/* 主题变量定义 */
@theme {
  --color-brand-500: #0ea5e9;
  --font-display: "Satoshi", "sans-serif";
}

/* 自定义工具类 */
@utility scrollbar-hide { ... }

/* 自定义变体 */
@custom-variant hocus (&:hover, &:focus) { ... }

组件级样式：

对于需要特定样式的组件，可以在组件文件中使用 @apply：

vue 复制代码

<!-- Button.vue -->
<template>
  <button class="btn-primary">
    <slot />
  </button>
</template>

<style>
@reference "../../styles/main.css";

.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded-lg 
         hover:bg-blue-600 active:bg-blue-700 
         transition-colors duration-200;
}
</style>

8.2 性能优化技巧

Tailwind CSS 4.0 本身已经非常高效，但遵循以下最佳实践可以让你的项目更加快速：

合理使用 JIT 模式：Tailwind CSS 4.0 默认使用即时编译，只生成实际使用的工具类。避免在 HTML 中写太多永远不会用到的工具类。

使用 @utility 而不是 CSS 类：自定义工具类会自动获得 Tailwind CSS 的优化和缓存机制。

利用 CSS 变量：对于需要动态改变的值，使用 CSS 变量而不是多个工具类：

html 复制代码

<!-- 不推荐 -->
<div class="bg-red-500 md:bg-blue-500 lg:bg-green-500">

<!-- 推荐 -->
<div class="bg-[var(--theme-color)]">

压缩和清理：在生产构建时，确保 CSS 被正确压缩和清理。Tailwind CSS 4.0 的 CLI 和 Vite 插件会自动处理这些。

8.3 与设计系统集成

Tailwind CSS 4.0 非常适合构建和管理设计系统。以下是一些集成建议：

定义设计令牌：将设计系统中的颜色、字体、间距等定义为 CSS 变量：

css 复制代码

@theme {
  /* 颜色令牌 */
  --color-primary-50: var(--ds-color-primary-50);
  --color-primary-500: var(--ds-color-primary-500);
  --color-primary-900: var(--ds-color-primary-900);
  
  /* 字体令牌 */
  --font-heading: var(--ds-font-heading);
  --font-body: var(--ds-font-body);
  
  /* 间距令牌 */
  --spacing-layout: var(--ds-spacing-layout);
}

组件库构建 ：使用 Tailwind CSS 构建组件库时，利用 @layer 和 @utility 来组织样式：

css 复制代码

@layer components {
  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
  }
  
  .card-header {
    @apply text-xl font-bold mb-4;
  }
}

与设计工具同步：使用工具将 Figma 或 Sketch 中的设计令牌导出为 Tailwind CSS 配置文件，保持设计和代码的一致性。

8.4 团队协作建议

在团队环境中使用 Tailwind CSS 4.0 时，以下实践可以提高协作效率：

建立组件库：创建团队共享的组件库，确保 UI 的一致性。使用 Storybook 或类似的工具来文档化组件。

编码规范：制定团队内部的 Tailwind CSS 编码规范，包括类名顺序、命名约定等。可以使用 ESLint 插件来强制执行这些规范。

代码审查：在代码审查时特别关注样式的使用，确保没有冗余或不必要的工具类。

文档化：为团队创建 Tailwind CSS 使用指南，包括常用的工具类组合、自定义主题的使用方法等。

九、常见问题解答

问题一：Tailwind CSS 4.0 与 v3 有什么主要区别？

Tailwind CSS 4.0 的主要区别包括：CSS 优先配置替代 JavaScript 配置文件、显著的性能提升、移除废弃工具类、新的 @theme 和 @utility 指令，以及对现代 CSS 特性的全面支持。

问题二：是否必须升级到 Tailwind CSS 4.0？

不是强制的，但建议升级。Tailwind CSS 4.0 提供了更好的开发体验和性能改进。v3 仍然会得到安全更新，但新功能只会添加到 v4。

问题三：升级后原来的 tailwind.config.js 还能用吗？

可以，但需要显式引用。升级工具会自动将配置迁移到 CSS 文件。如果你想保留 JS 配置文件，可以使用 @config 指令引用它。

问题四：Tailwind CSS 4.0 是否支持旧版浏览器？

不支持。Tailwind CSS 4.0 专为现代浏览器设计，需要 Safari 16.4+、Chrome 111+ 或 Firefox 128+。如果需要支持旧版浏览器，请继续使用 v3.4。

*问题五：如何处理透明度修饰符和 opacity- 工具类的区别？**

在 v4 中，应该使用透明度修饰符（如 bg-red-500/50）替代已移除的 bg-opacity-* 工具类。透明度修饰符更简洁、更灵活，支持任意颜色和透明度值的组合。

问题六：Tailwind CSS 4.0 如何处理暗色模式？

v4 使用 color-scheme: dark 来控制暗色模式，而不是之前的 media 策略。你可以继续使用 dark: 前缀来定义暗色模式下的样式。

问题七：如何使用 Sass、Less 或 Stylus 与 Tailwind CSS 4.0？

Tailwind CSS 4.0 官方不支持与 Sass、Less 或 Stylus 等 CSS 预处理器一起使用。这是因为 v4 本身就是基于现代 CSS 的构建工具，不需要额外的预处理步骤。建议直接使用原生 CSS 或 PostCSS 插件。

十、总结与展望

Tailwind CSS 4.0 代表了原子化 CSS 框架的一个重要进化。通过转向 CSS 优先的配置方式、利用现代 CSS 特性，以及显著的性能优化，Tailwind CSS 4.0 为前端开发者提供了一个更加强大、更加高效的工具。

这个版本的核心优势包括：

简化的配置：直接使用 CSS 定义主题，减少了配置文件和构建复杂性。
显著的性能提升：编译速度提高 25 倍，启动时间加快 5 倍。
更好的开发者体验：即时的反馈、更快的热更新、更清晰的错误信息。
现代 CSS 集成 ：充分利用 @property、color-mix()、容器查询等现代 CSS 特性。
更小的生产包体积：优化的 CSS 生成算法减少了最终产物的体积。

展望未来，Tailwind CSS 团队将继续致力于改进框架的性能和功能。随着 CSS 标准的不断发展，Tailwind CSS 将继续整合新的特性，为开发者提供最前沿的工具。我们鼓励所有开发者尝试 Tailwind CSS 4.0，体验它带来的改进，并在官方文档和社区中获取更多资源。

无论是新项目还是现有项目的升级，Tailwind CSS 4.0 都是一个值得考虑的选择。它不仅解决了许多长期存在的问题，还为 CSS 开发设定了新的标准。现在就开始你的 Tailwind CSS 4.0 之旅吧！