开源 CSS 框架 Tailwind CSS v4.0

devtools/2025/2/5 17:12:46/

开源 CSS 框架 Tailwind CSS v4.0 于 1 月 22 日正式发布,除了显著提升性能、简化配置体验外,还增强了功能特性,具体如下1:

性能提升

采用全新的高性能引擎 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 伪类。
  • 后代变体:新增 ** 变体,用于选择所有后代元素,结合其他变体可精准筛选。

http://www.ppmy.cn/devtools/156327.html

相关文章

图神经网络驱动的节点分类:从理论到实践

图神经网络驱动的节点分类:从理论到实践 1. 引言 图神经网络(Graph Neural Networks,GNN)作为处理图结构数据的强大工具,近年来在学术界和工业界都取得了显著进展。其独特的消息传递机制能够有效捕捉图数据中的复杂关系,为节点分类、链接预测、图分类等任务提供了新的解…

「全网最细 + 实战源码案例」设计模式——模板方法模式

核心思想 模板方法模式(Template Method Pattern)是一种行为型设计模式,定义了一个算法的骨架(模板),将某些步骤延迟到子类中实现(在不修改结构的情况下),以避免代码重复…

新春贺岁,共赴AGI之旅

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 往期精彩文章推荐 季姮教授独家文字版干货 | 面向知识渊博的大语言模型 关于AI TIME AI TIME源起于2019年,旨在发扬科学思辨精神,邀请各界人士对人工智能理论、算法和场景应用的本质问题…

神经网络|(七)概率论基础知识-贝叶斯公式

【1】引言 前序我们已经了解了一些基础知识。 古典概型:有限个元素参与抽样,每个元素被抽样的概率相等。 条件概率:在某条件已经达成的前提下,新事件发生的概率。实际计算的时候,应注意区分,如果是计算综…

Linux 系统上安装 Docker 方法详解与比较

Docker 是现代 DevOps 和容器化应用开发的重要工具,它简化了应用的部署和管理流程。本文将详细介绍在 Linux 系统上安装 Docker 的多种方法,并对它们的适用场景、优缺点进行对比,确保读者能够根据自身需求选择最优方案。 1. 官方推荐的安装方…

【游戏设计原理】98 - 时间膨胀

从上文中,我们可以得到以下几个启示: 游戏设计的核心目标是让玩家感到“时间飞逝” 游戏的成功与否,往往取决于玩家的沉浸感。如果玩家能够完全投入游戏并感受到时间飞逝,说明游戏设计在玩法、挑战、叙事等方面达到了吸引人的平衡…

【机器学习理论】朴素贝叶斯网络

基础知识: 先验概率:对某个事件发生的概率的估计。可以是基于历史数据的估计,可以由专家知识得出等等。一般是单独事件概率。 后验概率:指某件事已经发生,计算事情发生是由某个因素引起的概率。一般是一个条件概率。 …

【学习笔记之coze扣子】应用创建

今天我们来创建一个应用,也是非常简单 首先我们先创建一个应用的工作中心,为他写上名字 第二步 进来之后我们需要创建一个工作流,如果你用工作流,你也可以点击引入你需要的工作流 创建好工作流后,你会在工作台上看见一…