Tailwind CSS 正式发布了 4.0 版本

1 月 22 日,Tailwind CSS 正式发布了 4.0 版本124。以下是该版本的一些新特性:

性能提升

采用全新的高性能引擎 Oxide,基准测试显示全量构建速度提升超 3.5 倍,增量构建速度提升超 8 倍,无新 CSS 的增量构建速度提升 182 倍。

配置优化

  • CSS 优先配置:从 JavaScript 配置文件改为直接在 CSS 文件中使用 @theme 指令进行配置,简化项目文件结构。
  • 自动源检测:自动检测内容源,忽略.gitignore 中的文件和二进制文件,可通过 @source 指令添加默认排除的源。
  • 内置导入支持:无需额外插件即可处理 @import,与引擎紧密集成,速度更快。
  • 内置 CSS 转译:生产构建时自动通过 Lightning CSS 处理供应商前缀、现代特性转译、压缩等,可移除相关工具。

功能增强

  • CSS 主题变量:设计标记默认作为 CSS 变量,方便在运行时引用,用于内联样式或传递给动画库。
  • 原生 CSS 层叠层:使用真实 CSS 层叠层,更易控制样式优先级和交互,减少代码维护量。
  • 动态间距比例:从单一间距比例值派生多种间距实用工具,可自定义或禁用默认间距变量。
  • 现代化 P3 颜色调色板:默认颜色调色板从 rgb 升级到 oklch,色彩更鲜艳,升级项目时颜色平衡保持一致。
  • 简化变量颜色:借助 color-mix () 函数,定义颜色变量更简单,不透明度修饰符自动生效。
  • 容器查询支持:核心支持容器查询,无需额外插件,新增 @max-* 变体,可堆叠变体定义查询范围。
  • 3D 变换:添加 3D 变换 API,如旋转、缩放、平移等,可控制透视和背面可见性。
  • 多种梯度增强:线性梯度支持角度值,新增梯度插值修饰符,添加圆锥和径向梯度实用工具。
  • 新增实用工具类 :包括 inset-shadow-、inset-ring- 、field-sizing-、color-scheme-、font-stretch-* 等,满足不同场景需求。
  • 变体增强 :可组合变体,新增 @starting-style、not-、inert、nth-、in-* 等变体,open 变体支持:popover-open 伪类。
  • 后代变体:新增 ** 变体,用于选择所有后代元素,结合其他变体可精准筛选。
相关推荐
程序员Sunday5 分钟前
爆肝万字!这应该是全网最全的 Codex 实战教程了
前端·后端·ai编程
aircrushin5 分钟前
朋友用trae搭建的工具,解决了旅行拍照共享的大事儿
前端·后端
ZC跨境爬虫11 分钟前
跟着 MDN 学 HTML day_41:(DOMParser 接口详解)
前端·javascript·ui·html·音视频
光影少年24 分钟前
useLayoutEffect 和 useEffect 区别、使用场景
开发语言·前端·javascript
LIO35 分钟前
掌握 React useEffect:核心概念、使用技巧与常见陷阱
前端·react.js
XD74297163639 分钟前
科技早报晚报|2026年5月12日:GUI Agent、编程会话工作台与 npm 安装门禁,今晚更值得做的 3 个技术机会
前端·科技·npm·供应链安全·ai agent·开发者工具
前端那点事44 分钟前
Vue3 新趋势:10个高阶实用操作|性能优化+开发提效+避坑指南
前端·vue.js
small_white_robot44 分钟前
idek-2022 web 全wp——持续更新
开发语言·前端·javascript·网络·安全·web安全·网络安全
漫游的渔夫44 分钟前
从 if-else 乱麻到状态机:前端开发者该怎么理解多 Agent 协作?
前端·人工智能·typescript
前端那点事1 小时前
90%前端只会皮毛!JSON.parse/stringify高阶用法、数据规则、避坑终极指南
前端·vue.js