电商的网站有几个,闵行网站建设公司纸,东莞优化排名公司,php做网站需要的技术Holy shit its actually done #xff01;
1 月 22 日#xff0c;Tailwind CSS 正式发布了 4.0 版本#xff0c;针对性能和灵活性进行了优化#xff0c;重新构想了配置和定制体验#xff0c;并充分利用了 Web 平台提供的最新进展。
新的高性能引擎- 完整构建速度提高 5 …
Holy shit its actually done
1 月 22 日Tailwind CSS 正式发布了 4.0 版本针对性能和灵活性进行了优化重新构想了配置和定制体验并充分利用了 Web 平台提供的最新进展。
新的高性能引擎- 完整构建速度提高 5 倍增量构建速度提高 100 倍以上 - 以微秒为单位。 专为现代网络而设计property— 基于诸如级联层、使用、注册的自定义属性等尖端 CSS 功能构建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上的浏览器中使用它。
对于现有项目我们发布了全面的升级指南并构建了自动升级工具以便您尽快、轻松地获得最新版本。 新型高性能引擎
Tailwind CSS v4.0 是对该框架的彻底重写它吸收了我们多年来对架构的所有了解并对其进行了优化使其尽可能快。
当我们对自己的项目进行基准测试时我们发现完全重建速度提高了 3.5 倍以上增量构建速度提高了 8 倍以上。
以下是我们对 Tailwind CSS v4.0 与Catalyst进行基准测试时看到的平均构建时间
v3.44.0版改进完整构建378毫秒100毫秒3.78x使用新 CSS 进行增量重建44毫秒5毫秒8.8x无需新 CSS 的增量重建35毫秒192微秒182x
最令人印象深刻的改进是增量构建实际上不需要编译任何新的 CSS — 这些构建速度快 100 倍以上并在几微秒内完成。而且你在项目上工作的时间越长你遇到的这些构建就越多因为你只是使用以前已经使用过的类例如flex、col-span-2或font-bold。 专为现代网络而设计
自我们发布 Tailwind CSS v3.0 以来平台已经有了很大的发展而 v4.0 充分利用了其中的许多改进。 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 功能
原生级联层——让我们比以往更好地控制不同样式规则之间的交互方式。 注册的自定义属性- 可以执行诸如动画渐变之类的操作并显著提高大页面的性能。color-mix() — 它让我们调整任何颜色值的不透明度包括 CSS 变量和currentColor。逻辑属性——简化 RTL 支持并减少生成的 CSS 的大小。
其中许多功能甚至从内部简化了 Tailwind减少了出现错误的面积并使我们更易于维护框架。 简化安装
我们在 v4.0 中大大简化了设置流程减少了步骤数并删除了大量样板代码。 1.安装 Tailwind CSS npm i tailwindcss tailwindcss/postcss; 2.添加PostCSS插件 export default {plugins: [tailwindcss/postcss],
}; 3. 在 CSS 中导入 Tailwind import tailwindcss; 通过我们对 v4.0 中此流程所做的改进Tailwind 比以往更加轻量
只需一行 CSS — 无需更多tailwind指令只需添加import tailwindcss并开始构建。 零配置——您可以开始使用框架而无需配置任何内容甚至不需要配置模板文件的路径。无需外部插件- 我们import为您捆绑开箱即用的规则并在后台使用Lightning CSS进行供应商前缀和现代语法转换。
当然每个项目你只需要经历一次这样的过程但是当你每个周末开始和放弃不同的副项目时这个过程就会累积起来。 第一方 Vite 插件
如果您是 Vite 用户现在可以使用 Tailwindtailwindcss/vite而不是 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 v3 中总是需要配置那个烦人的content数组吗在 v4.0 中我们想出了一系列启发式方法来自动检测所有这些东西这样您根本不必进行配置。
例如我们会自动忽略.gitignore文件中的任何内容以避免扫描依赖项或不受版本控制的生成文件 .gitignore /node_modules
/coverage
/.next/
/build 我们还会自动忽略所有二进制扩展名如图像、视频、.zip 文件等。
如果您需要明确添加默认排除的源您可以随时使用source指令在 CSS 文件中将其添加 CSS import tailwindcss;
source ../node_modules/my-company/ui-lib; 该source指令在底层使用相同的启发式方法因此它也会排除二进制文件类型而无需您指定要明确扫描的所有扩展名。
在我们的新文档中了解有关在源文件中检测类的更多信息。 内置导入支持
在 v4.0 之前如果您想内联其他 CSS 文件import您必须配置另一个插件来postcss-import为您处理它。
现在我们可以立即处理这个问题所以您不需要任何其他工具 postcss.config.js export default {plugins: [postcss-import,tailwindcss/postcss,],
}; 我们的导入系统是专为 Tailwind CSS 构建的因此我们还可以通过将其与我们的引擎紧密集成使其运行得更快。 CSS 优先配置
Tailwind CSS v4.0 中最大的变化之一是从使用 JavaScript 配置项目转变为使用 CSS 配置项目。
您无需使用tailwind.config.js文件而是可以直接在导入 Tailwind 的 CSS 文件中配置所有自定义项这样就少了一个需要担心的项目文件 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-first 配置允许您执行文件中几乎所有可以执行的操作tailwind.config.js包括配置设计令牌、定义自定义实用程序和变体等。
要了解其工作原理请阅读新的主题变量文档。 CSS 主题变量
Tailwind CSS v4.0 采用您的所有设计令牌并默认将它们作为 CSS 变量提供因此您只需使用 CSS 即可在运行时引用所需的任何值。
使用前面的示例theme所有这些值都将作为常规自定义属性添加到您的 CSS 中 生成的 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等库来为其设置动画。 动态效用值和变体
我们简化了许多实用程序和变体在 v4.0 中的工作方式有效地允许它们接受某些类型的任意值而无需任何配置或降低到任意值语法。
例如在 Tailwind CSS v4.0 中您可以创建任意大小的网格 HTML div classgrid grid-cols-15!-- ... --
/div 您还可以定位自定义布尔数据属性而无需定义它们 HTML div data-current classopacity-75 data-current:opacity-100!-- ... --
/div 甚至间距实用程序例如px-*、mt-*、w-*、h-*等现在都是从单个间距比例变量动态派生而来的并且接受任何开箱即用的值 生成的 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 一起发布的升级工具注意到您使用了不再需要的任意值它甚至会自动为您简化大多数这些实用程序。 现代化的 P3 调色板
我们将整个默认调色板从 升级到rgboklch利用更宽的色域使以前受 sRGB 色彩空间限制的地方的色彩更加鲜艳。 我们试图保持所有颜色之间的平衡与 v3 中的相同因此即使我们全面刷新了内容在升级现有项目时也不会感觉像是重大变化。 容器查询
我们已将容器查询支持纳入 v4.0 的核心因此您不再需要tailwindcss/container-queries插件 HTML div classcontainerdiv classgrid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4!-- ... --/div
/div 我们还使用新变体添加了对最大宽度容器查询的支持max-* HTML div classcontainerdiv classgrid grid-cols-3 max-md:grid-cols-1!-- ... --/div
/div 与我们的常规断点变体一样您也可以堆叠min-*和max-*变体来定义容器查询范围 HTML div classcontainerdiv classflex min-md:max-xl:hidden!-- ... --/div
/div 在我们全新的容器查询文档中了解更多信息。 新的 3D 变换实用程序
我们最终添加了用于进行 3D 转换的 API例如、、、rotate-x-*等等。rotate-y-*scale-z-*translate-z-* div classperspective-distantarticle classrotate-x-51 rotate-z-43 transform-3d ...!-- ... --/article
/div 查看更新的、、transform-style和文档以开始使用。rotateperspectiveperspective-origin 扩展渐变 API
我们在 v4.0 中添加了大量新的渐变功能因此您无需编写任何自定义 CSS 即可实现更精美的效果。
线性渐变角度
线性渐变现在支持角度作为值因此您可以使用类似实用程序bg-linear-45在 45 度角上创建渐变 div classbg-linear-45 from-indigo-500 via-purple-500 to-pink-500/div 您可能注意到我们也已重命名bg-gradient-*为bg-linear-*— 您很快就会明白为什么
渐变插值修饰符
我们添加了使用修饰符来控制渐变的颜色插值模式的功能因此像bg-linear-to-r/srgb使用 sRGB 进行插值的类以及bg-linear-to-r/oklch使用 OKLCH 进行插值的类 div classbg-linear-to-r/srgb from-indigo-500 to-teal-400.../div
div classbg-linear-to-r/oklch from-indigo-500 to-teal-400.../div from-*当色轮上的和 颜色相距较远时使用 OKLCH 或 HSL 等极地色彩空间可以产生更加生动的渐变to-*。我们在 v4.0 中默认使用 OKLAB但您始终可以通过添加其中一个修饰符来使用不同的色彩空间进行插值。
圆锥渐变和径向渐变
我们添加了用于创建圆锥渐变和径向渐变的新实用程序bg-conic-*bg-radial-* div classsize-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600/div
div classsize-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%/div 这些新实用程序与现有的from-*、via-*和to-*实用程序一起工作让您可以像创建线性渐变一样创建圆锥渐变和径向渐变并包含用于设置颜色插值方法的修饰符和用于控制渐变位置等细节的任意值支持。 starting-style 支持
新starting变体增加了对新 CSSstarting-style功能的支持使得在元素首次显示时转换元素属性成为可能 divbutton popovertargetmy-popoverCheck for updates/buttondiv popover idmy-popover classtransition-discrete starting:open:opacity-0 ...!-- ... --/div
/div 有了starting-style您终于可以在页面上为元素添加动画效果而无需任何 JavaScript。浏览器支持可能尚未完全实现但我们正在接近目标 非-* 变体
我们添加了一个新的not-*变体最终增加了对 CSS:not()伪类的支持 HTML div classnot-hover:opacity-75!-- ... --
/div CSS .not-hover\:opacity-75:not(*:hover) {opacity: 75%;
}
media not (hover: hover) {.not-hover\:opacity-75 {opacity: 75%;}
} 它具有双重功能还允许您否定媒体查询和supports查询 HTML div classnot-supports-hanging-punctation:px-4!-- ... --
/div CSS .not-supports-hanging-punctation\:px-4 {supports not (hanging-punctation: var(--tw)) {padding-inline: calc(var(--spacing) * 4);}
} 查看新not-*文档以了解更多信息。 更多新实用程序和变体
我们还在 v4.0 中添加了大量其他新实用程序和变体包括
新功能 inset-shadow-*和inset-ring-*实用程序——可以在单个元素上堆叠最多四层框阴影。 新的 field-sizing实用程序——无需编写一行 JavaScript 即可自动调整文本区域的大小。新的 color-scheme实用程序——这样你最终就可以摆脱黑暗模式下那些丑陋的浅色滚动条。新的 font-stretch实用程序——用于仔细调整支持不同宽度的可变字体。新的 inert变体——用于设置标有属性的非交互式元素的样式inert。新的 nth-*变种——做一些你最终会后悔的聪明事情。新的 in-*变体— 与 非常相似group-*但不需要类group。支持 :popover-open——使用现有open变体来定位打开的弹出窗口。新的 后代变体— 用于设计所有后代元素的样式无论是好是坏。
查看所有这些功能的相关文档以了解更多信息。 相关文档
Tailwind CSS v4.0 - Tailwind CSS
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
