Tailwind CSS v4.0版本都有哪些新变化和改进？

Tailwind CSS v4.0 提供了更多创意空间，旨在优化开发工作流程并为开发人员提供更多创意可能性。这次更新不仅加快了性能，还带来了强大的实用功能、改进的配置选项和更强大的设计工具。通过这些更新，Tailwind 使构建现代且可扩展的 web 应用程序变得更加容易。在这篇文章里，我们将探讨这些关键变化，并看看它们是如何改善你的开发流程的。

Tailwind CSS 版本4.0 精彩亮点

性能增强

Tailwind CSS v4.0 的一个突出特点是新优化的编译引擎。框架已经全面升级，使完整构建和增量构建的速度显著提升。基准测试显示：

• 完全构建: 从 378 毫秒减少至 100 毫秒（快上 3.78 倍）
• 带有新 CSS 的增量构建: 从 44 毫秒减少至 5 毫秒（快上 8.8 倍）
• 无新 CSS 的增量构建: 从 35 毫秒减少至 192 微秒（快近 182 倍）

这些改进使得开发流程更加流畅和高效，尤其是对于大型项目来说。

首推CSS设置

Tailwind v4.0 引入了 CSS 优先的开发方式，允许开发人员直接在 CSS 文件里配置设计令牌、断点等参数，而不是在 tailwind.config.js 文件里进行配置。这样不仅简化了设置，也让工作流程更加直观。

    @import "tailwindcss";  

    @theme {  
      --font-display: "Satoshi", "sans-serif";  
      --breakpoint-3xl: 1920px;  
      --color-牛油果-100: okl(0.99, 0, 0);  
      --color-牛油果-200: oklch(0.98, 0.04, 113.22);  
    }

此外，现在支持原生的 CSS 层叠层（CSS 堆叠层），这为开发人员提供了更大的控制权，可以控制样式顺序，并确保较高层不会无意中覆盖较低层的样式。从而使得 CSS 输出更加可预测和有组织。

动态间隔的设计标记

Tailwind v4.0 引入了设计令牌（tokens）作为 CSS 变量，从而在运行时提供了更大的灵活性。颜色、字体和断点等现在可以定义为 CSS 变量，并可以在整个项目中动态引用。

    :root {  
      /* 这是CSS代码，用于定义全局样式和变量 */
      --font-display: "Satoshi", "sans-serif";  /* 设置字体显示类型 */
      --color-avocado-100: okl(0.99 0 0); /* okl是一个CSS函数，用于定义颜色 */
    }

Tailwind v4.0 引入了设计变量（设计变量在这里指的是可配置的属性，如颜色、字体等），从而增强了运行时的灵活性。颜色、字体和断点现在都可以作为 CSS 变量来定义，并在整个项目中动态引用这些变量。

原生 CSS 级联层功能

Tailwind v4.0 引入了 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;
      }
    }

自动来源检测

Tailwind v4.0 去除了手动配置内容源的需求，因为它现在会自动找到相关的文件（如 .html 和 .js），通过智能算法。如果你有特定的文件需要手动添加，你可以用 @source 指令手动添加它们。

内置导入功能及CSS转码

Tailwind v4.0 去除了像 postcss-import 這樣的第三方插件的需求。框架现在原生支持直接导入额外的 CSS 文件，从而实现更快的构建时间和更简洁的配置。

此外，内置的 Lightning CSS 转译处理了浏览器前缀、压缩代码以及现代 CSS 特性的转译，这样就不需要使用像 autoprefixer 或 postcss-preset-env 这样的工具了。

简单主题设置

Tailwind v4.0 简化了主题配置，通过移除手动设置诸如 grid-cols-12 或 opacity-70 这样的实用类的需求，使其直接可用。现在你可以专注于核心设计令牌，如排版、颜色和断点，而不是手动设置这些实用类。

    <div class="grid grid-cols-73">  
      <div>1</div>  
      <!-- 这里省略了一些内容 -->  
      <div>73</div>  
    </div>

简化变量的色彩

Tailwind v4.0通过提供颜色混合函数，自动处理透明度调整，减少复杂变通手段。

@theme {  
  --color-primary: var(--color-blue-500); // 主色调为蓝色的500色阶  
  --color-error: var(--color-red-500); // 错误提示颜色为红色的500色阶  
}

Tailwind v4.0 新增了 渐变工具类 ，使渐变创建更简单，包括：

• 线性渐变（bg-linear-45）
• 径向渐变（bg-radial-[at_25%_25%]）
• 圆锥渐变（bg-conic-[in_hsl_longer_hue]）

除了这些之外，现在还可以使用如 rotate-x-*、rotate-y-* 和 scale-z-* 这样的 3D 变换来用于创建复杂的 3D 效果。此外，Z 轴变换（如 scale-z-50、translate-z-0）使更沉浸式的和动态的布局成为可能。

扩展版本和选择项

Tailwind v4.0 带来了更多动态样式的功能，新增了多种变体样式，例如：

• @starting-style：初次加载样式时进行动画效果。
• not-：非-时应用样式。
• in-*：状态匹配-时进行目标选择，无需父级组。

更棒的颜色选项和排版控制

Tailwind v4.0 带来了对颜色、角度和插值方式的更多控制，特别是在处理渐变方面。

• bg-linear-45：应用一个45度角的线性渐变，从而实现从一种颜色平滑过渡到另一种颜色。
• bg-linear-to-r/srgb：使用sRGB插值使颜色渐变在不同设备上更加一致。
• bg-linear-to-r/okl：使用OKL插值，在感知均匀的颜色空间中，提供更鲜艳的渐变效果。
• bg-conic-[in_hsl_longer_hue]：应用一个具有更宽色调范围的圆锥形渐变，以实现更丰富、更复杂的颜色过渡。
• bg-radial-[at_25%_25%]：从距左上角的25%位置处创建径向渐变，提供更自定义的渐变效果。

三维变换和视角调整

Tailwind v4.0 引入了控制 3D 变换和透视效果的实用工具，从而可以实现更加沉浸的视觉效果：

从某种角度看:

• perspective-normal: 设置默认的透视效果，视距为500px，使元素呈现出更自然的3D效果。
• perspective-distant: 设置更长的视距为1200px，使3D效果显得更柔和，不那么明显。
• perspective-origin-top-left: 将3D透视的原点设在左上，允许根据元素位置进行更个性化的深度调整。

背光可见性:

• backface-visible：让元素的背面在旋转时可见，常用于翻转动画。
• backface-hidden：隐藏元素的背面，通常用于不希望元素背面在三维旋转中可见的情况下。

这些工具允许更好地管理和调整3D空间中元素的深度和可见度，这使得创建吸引人的、动态效果变得更加简单。

UI用户界面和表单控件的增强

Tailwind v4.0 引入了一些新的实用工具，简化了表单控件的处理过程，并提升了 UI 设计的用户体验，特别是在处理不同类型的输入或用户的偏好时。

• field-sizing-content: 根据内容调整文本区域大小，输入时会自动调整。
• field-sizing-fixed: 设置文本区域为固定大小，内容变化时大小不变。
• scheme-light: 应用浅色主题，使表单控件和 UI 元素在浅色应用中更容易调整样式。
• scheme-dark: 应用深色主题，使表单控件和 UI 元素在深色应用中更容易调整样式。

这些更新使处理表单元素更简单，让UI组件适应各种主题，并确保更好的响应。

字体伸缩工具

Tailwind v4.0 新增了字体拉伸实用工具，这使得对可变字体的宽度有更大的控制。

• font-stretch-normal：将字体伸缩设置为正常宽度，保持字体的默认宽度。
• font-stretch-expanded：扩展字体，使其宽度更大，使其看起来更拉长。
• font-stretch-150%：将字体拉伸至正常宽度的150%，看起来更戏剧化。

这些实用工具提供了更大的排版自由度，帮助我们使文本更加易读且更具视觉吸引力。

新可组合的变体

• 可组合的变体（例如 group-*，peer-*，not-*）允许您根据父元素或兄弟元素的条件应用样式。例如，group-has-[&[data-potato]]:opacity-100 当组内存在一个名为 data-potato 的子元素时应用样式。
• 开始样式变体在元素首次出现时应用过渡效果。例如，starting:open:opacity-0 transition-all duration-500 实现平滑淡入效果。
• 当条件不满足时，not-* 变体应用样式。例如，hover:not-focus:bg-indigo-700 目标按钮仅在其未被聚焦时应用背景颜色。
• nth-child 变体支持类似于 nth-child 的伪类，用于选择序列中的特定元素。例如，nth-3:underline 将第三个子元素的文本加上下划线。
• 当弹出框打开时，使用 open-* 变体应用样式。例如，open:opacity-100 弹出框打开时应用不透明度变化。
• 后代变体适用于目标元素的所有后代。例如，**:data-avatar:rounded-full 将所有带有 data-avatar 属性的父元素内的图像圆角化。

Tailwind CSS配置优化

Tailwind v4.0 增强了其配置的灵活性，配置更加灵活，让您能够：

• 您可以定义自定义动画和关键帧，通过 @theme 指令。
• 您可以通过 @theme 指令更方便地覆盖默认主题设置。
• 您可以直接在配置文件中控制断点。

v4.0 版本的重要变更

• 已移除弃用的工具类: bg-opacity-* 和 text-opacity-* 类已被新的透明度修饰符如 bg-black/50 替代。
• 更新阴影工具类及模糊度: 阴影工具类已更名为 shadow-sm，以便与其它阴影工具类（如 shadow-md 和 shadow-lg）保持一致。
• 更新边框颜色及轮廓宽度: 默认边框颜色现在是 currentColor，这意味着边框颜色会继承文本颜色。此外，轮廓的默认宽度现在为 3px (ring-3)。

Tailwind CSS v4.0 带来了强大的新功能，使构建高性能、视觉效果惊艳的网站变得更加容易。通过优化的引擎、更简单的配置、增强的渐变、3D 变换以及对样式的更多控制等功能，此次发布将 Tailwind 带到了一个新的高度。无论您是在处理小型项目还是大型应用程序，不管项目大小，Tailwind CSS v4.0 中的新工具和功能都能让您更快、更高效地打造响应式、动态设计。

Telegram/Instagram/Facebook/Threads（点击链接以访问线程平台）/GitHub点击链接以访问

点击上述链接访问我们的社交平台。