开源 CSS 框架 Tailwind CSS v4.0

开源 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 伪类。
  • 后代变体:新增 ** 变体,用于选择所有后代元素,结合其他变体可精准筛选。
相关推荐
程序猿000001号2 小时前
DeepSeek模型:开启人工智能的新篇章
人工智能·deepseek
梦云澜5 小时前
论文阅读(十四):贝叶斯网络在全基因组DNA甲基化研究中的应用
论文阅读·人工智能·深度学习
忆~遂愿7 小时前
3大关键点教你用Java和Spring Boot快速构建微服务架构:从零开发到高效服务注册与发现的逆袭之路
java·人工智能·spring boot·深度学习·机器学习·spring cloud·eureka
纠结哥_Shrek7 小时前
pytorch逻辑回归实现垃圾邮件检测
人工智能·pytorch·逻辑回归
辞落山7 小时前
自定义数据集,使用 PyTorch 框架实现逻辑回归并保存模型,然后保存模型后再加载模型进行预测
人工智能·pytorch·逻辑回归
天宇琪云8 小时前
关于opencv环境搭建问题:由于找不到opencv_worldXXX.dll,无法执行代码,重新安装程序可能会解决此问题
人工智能·opencv·计算机视觉
大模型之路8 小时前
大模型(LLM)工程师实战之路(含学习路线图、书籍、课程等免费资料推荐)
人工智能·大模型·llm
deephub9 小时前
十大主流联邦学习框架:技术特性、架构分析与对比研究
人工智能·python·深度学习·机器学习·联邦学习
英国翰思教育10 小时前
留学毕业论文如何利用不同问题设计问卷
人工智能·深度学习·学习·算法·学习方法·论文笔记
gaoenyang76052510 小时前
探索高效图像识别:基于OpenCV的形状匹配利器
人工智能·opencv·计算机视觉