Tailwind v 中令人兴奋的更新

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

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

一般结构变化

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 吗？
在这些情况下，类指的是窗口的大小。通过容器查询，它们可以改为引用容器的大小。

<div>



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

<h2>
  
  
  场地大小
</h2>

<p>字段大小调整还不是普遍支持的 CSS 功能，但一旦实现就会非常棒！您无需使用 JS 来创建自动调整大小的文本区域，只需使用 CSS。<br>
并且 Tailwind v4 支持它！</p>

<p>在 Tailwind 网站上尝试演示。<br>
现在，您只需将 field-sizing-content 类添加到文本区域即可使用它。</p>
<h2>
  
  
  后代更新
</h2>

<p>Tailwind stable（您可能不知道这一点）有一个 * 变体，允许您定位具有类的元素的 <em>direct</em> 子元素。例如：<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Tailwind v4 中的新 ** 变体将针对 <em>所有后代</em>:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h2>
  
  
  插入阴影（和环）
</h2>

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

<pre class="brush:php;toolbar:false">



<p><img src="https://img.php.cn/upload/article/000/000/000/173363689867865.jpg" alt="Exciting updates in Tailwind v�"></p>


<hr>

<h2>
  
  
  还有更多！
</h2>

<p>如果您想查看所有新增内容，请访问 https://tailwindcss.com/docs/v4-beta 并查看它们！</p><p>这篇文章是#discuss 文章！这就是为什么我保持简短的原因；我想知道你的想法！<br>
我知道你们中很多讨厌 Tailwind 的人可能会给我一些反馈？<br>
肯定有一些有争议的新功能，我想得到一些意见？</p>

<p>总结：发表评论！</p>


<hr>

<p>感谢您的阅读！<br>
最佳代码</p>