最新发布的Tailwind CSS v4.0提供了什么新能力？

Tailwind CSS v4.0 是一个全面升级的版本，提供了显著的性能提升和多项新功能。以下是其主要特点：

1. 性能提升

Tailwind CSS v4.0 采用了新的高性能引擎 Oxide，使得构建速度大幅提高：

全量构建 ：速度提升超过 3.5 倍。
增量构建 ：速度提升超过 8 倍 ，在无新 CSS 的情况下，速度提升高达 182 倍

2. CSS 主题变量

设计标记默认作为 CSS 变量，可以在运行时调用，适用于动态效果和与动画库的集成。例如：

css 复制代码

css
:root {
  --font-display: "Satoshi", "sans-serif";
  --color-avocado-100: oklch(0.99 0 0);
}

这些变量可以在整个项目中动态引用

3. 原生 CSS 层叠支持

增强了对 CSS 层叠的支持，允许开发者更好地控制样式的层次顺序，确保上层样式不会无意中覆盖下层样式。例如：

css 复制代码

css
@layer 主题 {
  :root {
    --font-sans: ui-sans-serif, system-ui, sans-serif;
  }
  
  @layer 基础 {
    * {
      box-sizing: border-box;
      margin: 0;
    }
  }
  
  @layer 实用类 {
    .pointer-events-none {
      pointer-events: none;
    }
  }
}

这使得 CSS 输出更加有序和可预测

4. 动态间距比例

开发者可以从单一间距值派生出多种间距工具，优化设计效果。例如，通过配置文件定义间距比例，然后在项目中使用相应的工具类

5. 现代化 P3 颜色调色板

引入了全新的 P3 颜色调色板，使得色彩更为鲜艳且利于保持颜色平衡。例如：

css 复制代码

css
:root {
  --color-primary: #1a2b3c;
  --color-secondary: #4d5e6f;
}

这些颜色可以通过配置文件自定义

6. 容器查询支持

无需额外插件即可实现容器查询，通过 @max-* 变体处理响应式设计。例如：

arduino 复制代码

css
@layer utilities {
  .max-w-md {
    max-width: 28rem;
  }
}

这使得开发者可以轻松实现不同尺寸下的布局调整

7. 3D 变换 API

新增了 3D 变换 API，允许开发者在 HTML 中直接进行 3D 变换。例如：

css 复制代码

css
.transform-3d {
  transform: rotateX(45deg);
}

这使得开发者可以轻松实现复杂的 3D 效果

8. 增强的渐变 API

支持包括线性渐变角度值、径向渐变和圆锥渐变等。例如：

css 复制代码

css
.gradient-linear {
  background-image: linear-gradient(to bottom, #1a2b3c, #4d5e6f);
}

这些渐变效果可以通过配置文件自定义

9. @starting-style 支持

允许开发者创建进入和退出过渡效果，无需使用 JavaScript。例如：

css 复制代码

css
@layer utilities {
  .transition-enter {
    transition: opacity 0.3s ease-in-out;
  }
}

这使得开发者可以轻松实现动态过渡效果

10. not- 变体*

样式仅在元素不匹配其他变体时应用。例如：

css 复制代码

css
@layer utilities {
  .not-pointer-events-none {
    pointer-events: auto;
  }
}

这使得开发者可以更好地控制样式的应用条件

11. 简化配置

引入了 CSS 优先的配置方式，开发者可以直接在 CSS 文件中配置设计令牌和断点。例如：

css 复制代码

css
@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
}

这使得配置更加简洁和直观

12. 自动内容检测

自动发现所有模板文件，无需手动配置。例如，通过 @source 指令手动添加未被自动检测到的文件

13. 内置导入支持

无需额外工具即可处理多个 CSS 文件的导入。例如：

scss 复制代码

css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

这使得开发者可以更快地处理 CSS 文件

14. Vite 插件集成

提供了首个 Vite 插件，实现了与 Vite 的紧密集成，最大化性能和最小化配置。例如：

javascript 复制代码

javascript
import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';

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

这使得开发者可以轻松享受 Vite 的高性能和 Tailwind 的便利性

这些新特性和性能提升使得 Tailwind CSS v4.0 更加灵活和强大，能够满足复杂的前端设计需求，并提高开发效率。