几个月前（撰写本文时），Tailwind CSS 开源了其在 Tailwind CSS v4.0 上的工作。 （您可以在 GitHub 上找到它）。

最近，Tailwind 宣布了 Tailwind CSS 4 的公开 beta，在本文中我将介绍新版本的亮点。那么让我们开始吧！

一般结构变化

Tailwind 对其发动机进行了重新设计，大大提高了性能。完整构建速度高达 5 倍，增量构建速度高达 100 倍（您没看错）。

Tailwind v4 也有统一的工具链。还记得必须在所有 Tailwind 项目中安装 autoprefixer 和 postcss 吗？以后再也不用这样了！

Tailwind 采用了一种有趣的配置方法，从 JS 配置文件转向 CSS 配置。这意味着您将直接在 CSS 中配置插件、主题和其他行为。

Tailwind 还获得了对 CSS 最新功能的支持。

CSS 有新徽标（和新功能）！ ？

最佳代码 ・ 11 月 23 日

#css #webdev ＃编程 ＃讨论

现在，总体变化已经完成，让我们看看 Tailwind 具体添加了哪些内容！

新功能？

如果您想尝试 Tailwind v4，请查看 v4（测试版）的入门文档。

如果您想轻松升级项目，只需运行 npx @tailwindcss/upgrade@next，Tailwind 就会为您完成。 小心！可能会有重大变化。

颜色

Tailwind v4 调色板基于 oklch 而不是 rgb。 RGB 颜色系统在跨屏幕的一致性和活力方面有点限制。由于 oklch 颜色系统现已得到广泛支持，Tailwind v4 将利用它！

容器查询

Tailwind v4 现在默认支持容器查询。如果你不知道什么是容器查询，让我解释一下。

您知道 Tailwind 中的 md:、sm: 等内容可以让您自定义在不同屏幕尺寸上应用的 CSS 吗？
在这些情况下，类指的是窗口的大小。通过容器查询，它们可以改为引用容器的大小。

在上面的示例中，网格将有 3 列 - 不是当  窗口  达到小尺寸时，而是当  容器  达到小尺寸时。正如您可以想象的，这在响应式布局中非常方便。


  
  
  场地大小


field-sizing 还不是普遍支持的 CSS 功能，但如果它得到支持，那就太棒了！您可以仅使用 CSS，而不需要 JS 创建自动调整大小的文本区域。

并且 Tailwind v4 支持它！

在 Tailwind 网站上尝试演示。

现在，您只需将 field-sizing-content 类添加到文本区域即可使用它。

  
  
  后代更新


Tailwind stable（您可能不知道这一点）有一个 * 变体，允许您针对具有类的元素的 direct 子元素。例如：







Tailwind v4 中的新 ** 变体将针对 所有后代：








  
  
  插入阴影（和环）


现在使用 inset-shadow 和 inset-ring 类可以轻松地在元素上创建插图阴影和圆环。












  
  
  还有更多！


如果您想查看所有新增内容，请访问 https://tailwindcss.com/docs/v4-beta 并查看它们！

这篇文章是#discuss 文章！这就是为什么我保持简短的原因；我想知道你的想法！

我知道你们中很多讨厌 Tailwind 的人可能会给我一些反馈？

肯定有一些有争议的新功能，我想得到一些意见？

总结：发表评论！




感谢您的阅读！

最佳代码