Tailwind CSS v4.0

我的天哪，终于完成了 - 我们刚刚为 Tailwind CSS v4.0 打上了标签。

🌐 Holy shit it's actually done — we just tagged Tailwind CSS v4.0.

Tailwind CSS v4.0 是该框架的全新版本，针对性能和灵活性进行了优化，重新构想了配置和自定义体验，并充分利用了 Web 平台提供的最新技术。

🌐 Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.

全新高性能引擎 — 完整构建速度提升至原来的 5 倍，增量构建速度提升超过 100 倍 — 并以微秒为单位进行计量。
为现代网络设计 — 基于前沿的 CSS 特性构建，如级联层、通过 @property 注册的自定义属性，以及 color-mix()。
简化安装 — 依赖更少，无需配置，只需在你的 CSS 文件中添加一行代码。
官方 Vite 插件 — 紧密集成，实现最佳性能和最少配置。
自动内容检测 — 所有模板文件都会被自动发现，无需任何配置。
内置导入支持 — 无需额外工具即可打包多个 CSS 文件。
CSS 优先配置 —— 一种重新构想的开发者体验，你可以直接在 CSS 中自定义和扩展框架，而不是在 JavaScript 配置文件中进行配置。
CSS 主题变量 — 将你的所有设计令牌以原生 CSS 变量的形式公开，这样你就可以在任何地方访问它们。
动态实用值和变体 — 不再猜测你的间距比例中存在什么值，也无需为了诸如基本数据属性等内容而扩展你的配置。
现代化 P3 调色板 — 经过重新设计、更生动的调色板，充分利用了现代显示技术的优势。
容器查询 —— 基于容器尺寸为元素设置样式的一流 API，无需插件。
全新的 3D 变换工具 — 直接在你的 HTML 中对元素进行 3D 空间变换。
扩展渐变 API——径向和圆锥渐变、插值模式等。
@starting-style 支持 — 一个新的变体，你可以用它来创建进入和退出过渡，而无需使用 JavaScript。
not-* variant — 仅当元素不匹配其他变体、自定义选择器或媒体或功能查询时，为其设置样式。
更多全新的实用工具和变体 —— 包括对 color-scheme、field-sizing、复杂阴影、inert 等的支持。

今天就开始使用 Tailwind CSS v4.0，你可以通过在新项目中安装来使用它，或者直接在浏览器中通过Tailwind Play进行试玩。

🌐 Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.

对于现有项目，我们已经发布了一份全面的升级指南，并开发了一款自动化升级工具，以尽可能快速且无痛地让你升级到最新版本。

🌐 For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.

新的高性能引擎(New high-performance engine)

Tailwind CSS v4.0 是对框架的彻底重写，汲取了我们多年来在架构方面积累的所有经验，并对其进行了优化，使其运行速度尽可能快。

🌐 Tailwind CSS v4.0 is a ground-up rewrite of the framework, taking everything we've learned about the architecture over the years and optimizing it to be as fast as possible.

在我们自己的项目中对其进行基准测试时，我们发现完整重建速度提高了 3.5 倍以上，增量构建速度提高了 8 倍以上。

🌐 When benchmarking it on our own projects, we've found full rebuilds to be over 3.5x faster, and incremental builds to be over 8x faster.

这是我们在将 Tailwind CSS v4.0 与 Catalyst 进行基准测试时看到的平均构建时间：

🌐 Here are the median build times we saw when we benchmarked Tailwind CSS v4.0 against Catalyst:

	v3.4	v4.0	Improvement
Full build	378ms	100ms	3.78x
Incremental rebuild with new CSS	44ms	5ms	8.8x
Incremental rebuild with no new CSS	35ms	192µs	182x

最令人印象深刻的改进是在增量构建上，这些构建实际上不需要编译任何新的 CSS——这些构建速度提高了超过 100 倍，并且在微秒级别内完成。而且你在项目上工作的时间越长，你遇到的这类构建就越多，因为你只是使用以前已经用过的类，比如 flex、col-span-2 或 font-bold。

🌐 The most impressive improvement is on incremental builds that don't actually need to compile any new CSS — these builds are over 100x faster and complete in microseconds. And the longer you work on a project, the more of these builds you run into because you're just using classes you've already used before, like flex, col-span-2, or font-bold.

专为现代网络设计(Designed for the modern web)

自我们发布 Tailwind CSS v3.0 以来，平台已经取得了长足的进步，而 v4.0 充分利用了其中的许多改进。

🌐 The platform has evolved a lot since we released Tailwind CSS v3.0, and v4.0 takes full advantage of many of these improvements.

CSS

@layer theme, base, components, utilities;@layer utilities {  .mx-6 {    margin-inline: calc(var(--spacing) * 6);  }  .bg-blue-500\/50 {    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);  }}@property --tw-gradient-from {  syntax: "<color>";  inherits: false;  initial-value: #0000;}

我们正在利用以下现代 CSS 功能：

🌐 We're leveraging modern CSS features like:

原生级联层 — 让我们比以往任何时候都更好地控制不同样式规则之间的交互方式。
已注册的自定义属性 — 可以实现诸如动画渐变等功能，并显著提高大型页面的性能。
color-mix() — 它允许我们调整任何颜色值的透明度，包括 CSS 变量和 currentColor。
逻辑属性 — 简化 RTL 支持并减小生成的 CSS 大小。

许多这些功能甚至简化了 Tailwind 的内部结构，减少了 bug 的暴露面，使框架更易于维护。

🌐 Many of these features have even simplified Tailwind internally, reducing the surface area for bugs and making the framework easier for us to maintain.

简化的安装(Simplified installation)

在 v4.0 中，我们极大地简化了设置流程，减少了步骤并删除了大量样板代码。

🌐 We've streamlined the setup process a ton in v4.0, reducing the number of steps and removing a lot of boilerplate.

1. Install Tailwind CSS

npm i tailwindcss @tailwindcss/postcss;

2. Add the PostCSS plugin

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

3. Import Tailwind in your CSS

@import "tailwindcss";

随着我们在 v4.0 中对此流程的改进，Tailwind 感觉比以往任何时候都更加轻量：

🌐 With the improvements we've made to this process for v4.0, Tailwind feels more light-weight than ever:

只需一行 CSS — 不再需要 @tailwind 指令，只需添加 @import "tailwindcss" 就可以开始构建。
零配置 — 你可以在不进行任何配置的情况下开始使用该框架，甚至不需要配置模板文件的路径。
无需外部插件 — 我们开箱即用地为你打包了 @import 规则，并在底层使用 Lightning CSS 来进行厂商前缀处理和现代语法转换。

当然，每个项目只需执行一次此操作，但当你每个周末开始并放弃不同的副项目时，它会累积起来。

🌐 Sure you only go through this once per project, but it adds up when you're starting and abandoning a different side-project every weekend.

第一方 Vite 插件(First-party Vite plugin)

如果你是 Vite 用户，现在可以使用 @tailwindcss/vite 集成 Tailwind，而不是使用 PostCSS：

🌐 If you're a Vite user, you can now integrate Tailwind using @tailwindcss/vite instead of PostCSS:

vite.config.ts

import { defineConfig } from "vite";import tailwindcss from "@tailwindcss/vite";export default defineConfig({  plugins: [    tailwindcss(),  ],});

Tailwind CSS v4.0 作为 PostCSS 插件使用时速度极快，但使用 Vite 插件可以获得更佳性能。

🌐 Tailwind CSS v4.0 is incredibly fast when used as a PostCSS plugin, but you'll get even better performance using the Vite plugin.

自动内容检测(Automatic content detection)

你知道在 Tailwind CSS v3 中，你总是必须配置那个烦人的 content 数组吗？在 v4.0 中，我们想出了一些启发式方法来自动检测所有这些内容，这样你就完全不需要配置了。

🌐 You know how you always had to configure that annoying content array in Tailwind CSS v3? In v4.0, we came up with a bunch of heuristics for detecting all of that stuff automatically so you don’t have to configure it at all.

例如，我们会自动忽略你 .gitignore 文件中的任何内容，以避免扫描不受版本控制的依赖或生成的文件：

🌐 For example, we automatically ignore anything in your .gitignore file to avoid scanning dependencies or generated files that aren’t under version control:

.gitignore

/node_modules/coverage/.next//build

我们还会自动忽略所有二进制扩展名，例如图片、视频、.zip 文件等。

🌐 We also automatically ignore all binary extensions like images, videos, .zip files, and more.

如果你需要显式地添加默认被排除的来源，你总是可以在 CSS 文件中使用 @source 指令来添加它：

🌐 And if you ever need to explicitly add a source that's excluded by default, you can always add it with the @source directive, right in your CSS file:

CSS

@import "tailwindcss";@source "../node_modules/@my-company/ui-lib";

@source 指令在底层使用相同的启发式方法，因此它也会排除二进制文件类型，例如，你无需显式指定所有要扫描的扩展名。

🌐 The @source directive uses the same heuristics under the hood, so it will exclude binary file types for example as well, without you having to specify all of the extensions to scan explicitly.

在我们的新文档中了解更多关于在源文件中检测类的信息。

🌐 Learn more about in our new documentation on detecting classes in source files.

内置导入支持(Built-in import support)

在 v4.0 之前，如果你想使用 @import 内联其他 CSS 文件，你必须配置另一个插件，比如 postcss-import，来为你处理。

🌐 Before v4.0, if you wanted to inline other CSS files using @import you'd have to configure another plugin like postcss-import to handle it for you.

现在我们开箱即用，无需任何其他工具：

🌐 Now we handle this out of the box, so you don't need any other tools:

postcss.config.js

export default {  plugins: [    "postcss-import",    "@tailwindcss/postcss",  ],};

我们的导入系统专为 Tailwind CSS 构建，因此我们还能够通过将其与我们的引擎紧密集成来使其速度更快。

🌐 Our import system is purpose-built for Tailwind CSS, so we've also been able to make it even faster by tightly integrating it with our engine.

CSS-first 配置(CSS-first configuration)

Tailwind CSS v4.0 中最大的变化之一是从使用 JavaScript 配置项目转变为使用 CSS 配置项目。

🌐 One of the biggest changes in Tailwind CSS v4.0 is the shift from configuring your project in JavaScript to configuring it in CSS.

你可以不使用 tailwind.config.js 文件，而是直接在导入 Tailwind 的 CSS 文件中配置所有自定义内容，这样你的项目中就少了一个需要管理的文件：

🌐 Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project:

CSS

@import "tailwindcss";@theme {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --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.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

新的 CSS 优先配置让你几乎可以做你在 tailwind.config.js 文件中能做的所有事情，包括配置你的设计令牌、定义自定义实用工具和变体等等。

🌐 The new CSS-first configuration lets you do just about everything you could do in your tailwind.config.js file, including configuring your design tokens, defining custom utilities and variants, and more.

要了解这一切的工作原理，请阅读新的主题变量文档。

🌐 To learn more about how it all works, read the new theme variables documentation.

CSS 主题变量(CSS theme variables)

Tailwind CSS v4.0 会获取所有设计令牌，并默认将其作为 CSS 变量提供，因此你只需使用 CSS 即可在运行时引用任何所需的值。

🌐 Tailwind CSS v4.0 takes all of your design tokens and makes them available as CSS variables by default, so you can reference any value you need at run-time using just CSS.

使用前面示例 @theme，所有这些值将被添加到你的 CSS 中作为常规自定义属性：

🌐 Using the example @theme from earlier, all of these values will be added to your CSS to as regular custom properties:

Generated CSS

:root {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --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.19 114.08);  --color-avocado-500: oklch(0.84 0.18 117.33);  --color-avocado-600: oklch(0.53 0.12 118.34);  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */}

这使得可以轻松地将这些值重用于内联样式，或传递给像 Motion 这样的库来实现动画效果。

🌐 This makes it easy to reuse these values as inline styles or pass them to libraries like Motion to animate them.

动态工具值和变体(Dynamic utility values and variants)

我们在 v4.0 中简化了许多工具和变体的工作方式，通过有效地允许它们接受某些类型的任意值，而无需任何配置或使用任意值语法。

🌐 We've simplified the way many utilities and variants work in v4.0 by effectively allowing them to accept certain types of arbitrary values, without the need for any configuration or dropping down to the arbitrary value syntax.

例如，在 Tailwind CSS v4.0 中，你可以创建任意大小的开箱即用网格：

🌐 For example, in Tailwind CSS v4.0 you can create grids of any size out of the box:

HTML

<div class="grid grid-cols-15">  <!-- ... --></div>

你还可以定位自定义布尔数据属性，而无需定义它们：

🌐 You can also target custom boolean data attributes without needing to define them:

HTML

<div data-current class="opacity-75 data-current:opacity-100">  <!-- ... --></div>

即使是像 px-*、mt-*、w-*、h-* 等间距工具，现在也都是从单一的间距比例变量动态派生出来的，并且开箱即可接受任何值：

🌐 Even spacing utilities like px-*, mt-*, w-*, h-*, and more are now dynamically derived from a single spacing scale variable and accept any value out of the box:

Generated CSS

@layer theme {  :root {    --spacing: 0.25rem;  }}@layer utilities {  .mt-8 {    margin-top: calc(var(--spacing) * 8);  }  .w-17 {    width: calc(var(--spacing) * 17);  }  .pr-29 {    padding-right: calc(var(--spacing) * 29);  }}

我们与 v4.0 一起发布的升级工具，如果注意到你使用了不再需要的任意值，它甚至会自动为你简化大部分这些工具。

🌐 The upgrade tool we released alongside v4.0 will even simplify most of these utilities for you automatically if it notices you using an arbitrary value that's no longer needed.

现代化 P3 调色板(Modernized P3 color palette)

我们已将整个默认色彩调色板从 rgb 升级到 oklch，利用更宽的色域，使颜色在之前受限于 sRGB 色彩空间的地方更加鲜艳。

🌐 We've upgraded the entire default color palette from rgb to oklch, taking advantage of the wider gamut to make the colors more vivid in places where we were previously limited by the sRGB color space.

我们尽量保持所有颜色之间的平衡与 v3 版本相同，因此即使我们全面更新了所有功能，在升级现有项目时也不会感觉有什么太大的变化。

🌐 We've tried to keep the balance between all the colors the same as it was in v3, so even though we've refreshed things across the board, it shouldn't feel like a breaking change when upgrading your existing projects.

容器查询(Container queries)

我们已在 4.0 版本的核心中引入了容器查询支持，因此你不再需要 @tailwindcss/container-queries 插件了：

🌐 We've brought container query support into core for v4.0, so you don't need the @tailwindcss/container-queries plugin anymore:

HTML

<div class="@container">  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">    <!-- ... -->  </div></div>

我们还添加了对使用新 @max-* 变体的最大宽度容器查询的支持：

🌐 We've also added support for max-width container queries using the new @max-* variant:

HTML

<div class="@container">  <div class="grid grid-cols-3 @max-md:grid-cols-1">    <!-- ... -->  </div></div>

像我们的常规断点变体一样，你也可以叠加 @min-* 和 @max-* 变体来定义容器查询范围：

🌐 Like our regular breakpoint variants, you can also stack @min-* and @max-* variants to define container query ranges:

HTML

<div class="@container">  <div class="flex @min-md:@max-xl:hidden">    <!-- ... -->  </div></div>

在我们全新的容器查询文档中了解更多信息。

🌐 Learn more in our all-new container queries documentation.

新的 3D 变换工具(New 3D transform utilities)

我们终于添加了用于进行3D变换的API，例如 rotate-x-*、rotate-y-*、scale-z-*、translate-z-*，以及更多其他功能。

🌐 We've finally added APIs for doing 3D transforms, like rotate-x-*, rotate-y-*, scale-z-*, translate-z-*, and tons more.

查看更新的 transform-style、rotate、perspective 和 perspective-origin 文档以开始使用。

🌐 Check out the updated transform-style, rotate, perspective, and perspective-origin documentation to get started.

扩展的渐变 API(Expanded gradient APIs)

我们在 v4.0，让你无需编写任何自定义 CSS 即可实现更炫酷的效果。

🌐 We've added a ton of new gradient features in v4.0, so you can pull off even fancier effects without having to write any custom CSS.

线性渐变角度(Linear gradient angles)

线性渐变现在支持角度作为数值，因此你可以使用诸如 bg-linear-45 之类的工具来创建 45 度角的渐变：

🌐 Linear gradients now support angles as values, so you can use utilities like bg-linear-45 to create a gradient on a 45 degree angle:

<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>

你可能会注意到我们也把 bg-gradient-* 重命名为 bg-linear-* — 很快你就会明白原因！

🌐 You may notice we've renamed bg-gradient-* to bg-linear-* too — you'll see why shortly!

渐变插值修饰符(Gradient interpolation modifiers)

我们添加了使用修饰符控制渐变颜色插值模式的功能，因此像 bg-linear-to-r/srgb 这样的类使用 sRGB 进行插值，而 bg-linear-to-r/oklch 使用 OKLCH 进行插值：

🌐 We've added the ability to control the color interpolation mode for gradients using a modifier, so a class like bg-linear-to-r/srgb interpolates using sRGB, and bg-linear-to-r/oklch interpolates using OKLCH:

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400">...</div><div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">...</div>

使用极性色彩空间，如 OKLCH 或 HSL，当 from-* 和 to-* 颜色在色轮上相距较远时，可以产生更生动的渐变效果。在 v4.0 中我们默认使用 OKLAB，但你也可以通过添加这些修饰符之一来使用不同的色彩空间进行插值。

🌐 Using polar color spaces like OKLCH or HSL can lead to much more vivid gradients when the from-* and to-* colors are far apart on the color wheel. We're using OKLAB by default in v4.0 but you can always interpolate using a different color space by adding one of these modifiers.

圆锥渐变和径向渐变(Conic and radial gradients)

我们新增了用于创建锥形和径向渐变的 bg-conic-* 和 bg-radial-* 工具：

🌐 We've added new bg-conic-* and bg-radial-* utilities for creating conic and radial gradients:

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div><div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

这些新工具与现有的 from-*、via-* 和 to-* 工具一起使用，允许你以创建线性渐变的方式创建圆锥和径向渐变，并包括用于设置颜色插值方法的修饰符以及用于控制渐变位置等细节的任意值支持。

🌐 These new utilities work alongside the existing from-*, via-*, and to-* utilities to let you create conic and radial gradients the same way you create linear gradients, and include modifiers for setting the color interpolation method and arbitrary value support for controlling details like the gradient position.

@starting-style 支持(@starting-style support)

新的 starting 版本增加了对新的 CSS @starting-style 功能的支持，使得在元素首次显示时可以过渡元素属性：

🌐 The new starting variant adds support for the new CSS @starting-style feature, making it possible to transition element properties when an element is first displayed:

<div>  <button popovertarget="my-popover">Check for updates</button>  <div popover id="my-popover" class="transition-discrete starting:open:opacity-0 ...">    <!-- ... -->  </div></div>

使用 @starting-style，你最终可以在元素出现在页面上时为其添加动画，而完全不需要任何 JavaScript。浏览器支持对大多数团队来说可能还不够完善，但我们已经越来越接近了！

🌐 With @starting-style, you can finally animate elements as they appear on the page without the need for any JavaScript at all. Browser support probably isn't quite there yet for most teams, but we're getting close!

非变体(not- variant)

我们新增了一个 not-* 变体，它终于支持 CSS :not() 伪类了：

🌐 We've added a new not-* variant which finally adds support for the CSS :not() pseudo-class:

HTML

<div class="not-hover:opacity-75">  <!-- ... --></div>

CSS

.not-hover\:opacity-75:not(*:hover) {  opacity: 75%;}@media not (hover: hover) {  .not-hover\:opacity-75 {    opacity: 75%;  }}

它有双重功能，还可以让你否定媒体查询和 @supports 查询：

🌐 It does double duty and also lets you negate media queries and @supports queries:

HTML

<div class="not-supports-hanging-punctuation:px-4">  <!-- ... --></div>

CSS

.not-supports-hanging-punctuation\:px-4 {  @supports not (hanging-punctuation: var(--tw)) {    padding-inline: calc(var(--spacing) * 4);  }}

查看新的 not-* 文档以了解更多信息。

🌐 Check out the new not-* documentation to learn more.