Tailwind v 中令人兴奋的更新
浏览：243
几个月前（撰写本文时），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 日
现在，总体变化已经完成，让我们看看 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 的人可能会给我一些反馈？
肯定有一些有争议的新功能，我想得到一些意见？总结：发表评论！
感谢您的阅读！
最佳代码
-
极简密码管理器桌面应用程序：进军 Golang 的 Wails 框架（第 2 部分）Hi again, coders! In the first part of this short series we saw the creation and operation of a desktop application to store and encrypt our passwords...编程 发布于2024-12-23 -
Bootstrap 4 Beta 中的列偏移发生了什么？Bootstrap 4 Beta：列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而，随着 Beta 2 的后续发布，这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...编程 发布于2024-12-23
-
插入数据时如何修复“常规错误：2006 MySQL 服务器已消失”？插入记录时如何解决“一般错误：2006 MySQL 服务器已消失”介绍：将数据插入 MySQL 数据库有时会导致错误“一般错误：2006 MySQL 服务器已消失”。当与服务器的连接丢失时会出现此错误，通常是由于 MySQL 配置中的两个变量之一所致。解决方案：解决此错误的关键是调整wait_tim...编程 发布于2024-12-23
-
ES6 React 组件：何时使用基于类与函数式？在 ES6 基于类和函数式 ES6 React 组件之间做出选择使用 React 时，开发人员面临着使用 ES6 基于类的选择组件或功能 ES6 组件。了解每种类型的适当用例对于最佳应用程序开发至关重要。函数式 ES6 组件：无状态和简单函数式组件是无状态的，这意味着它们不维护任何内部状态。他们只是...编程 发布于2024-12-23
-
如何在 PHP 中找到两个平面数组之间的唯一值？在平面数组之间查找唯一值给定两个数组，任务是确定仅存在于其中一个数组中的值。此操作通常称为查找两个集合之间的差异。在 PHP 中，您可以利用 array_merge、array_diff 和 array_diff 函数来实现此操作。详细解法如下：$array1 = [64, 98, 112, 92,...编程 发布于2024-12-23
-
如何使用 MySQL 查找今天生日的用户？如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现，该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户： FROM USERS ...编程 发布于2024-12-23
-
在 Go 中使用 WebSocket 进行实时通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...编程 发布于2024-12-23
-
如何在 PHP 中组合两个关联数组，同时保留唯一 ID 并处理重复名称？在 PHP 中组合关联数组在 PHP 中，将两个关联数组组合成一个数组是一项常见任务。考虑以下请求：问题描述：提供的代码定义了两个关联数组，$array1 和 $array2。目标是创建一个新数组 $array3，它合并两个数组中的所有键值对。 此外，提供的数组具有唯一的 ID，而名称可能重合。要求...编程 发布于2024-12-23
-
尽管代码有效，为什么 POST 请求无法捕获 PHP 中的输入？解决 PHP 中的 POST 请求故障在提供的代码片段中：action=''而不是：action="<?php echo $_SERVER['PHP_SELF'];?>";?>"检查 $_POST数组：表单提交后使用 var_dump 检查 $_POST 数...编程 发布于2024-12-23
-
CSS 可以在内联块元素中本机插入换行符吗？CSS 在行内块元素中插入换行符：理论探索在不断发展的 Web 开发领域，这种能力操纵内容流仍然是最重要的。经常出现的一个特殊挑战涉及在内联块元素中插入换行符。考虑以下 HTML 结构：<h3 id="features">Features</h3> <...编程 发布于2024-12-23
-
如何在 PHP 中轻松转换时区之间的时间和日期？在 PHP 中转换时区之间的时间和日期使用 PHP，您可以轻松地在不同时区之间转换时间和日期。此功能在处理全球数据的应用程序或与来自不同位置的用户一起工作时特别有用。获取时区偏移量要获取与 GMT 的时间偏移量，您可以使用 DateTimeZone 类。它提供了时区及其各自偏移量的完整列表。$tim...编程 发布于2024-12-23
-
如何在Windows上安装和使用Pip进行Python包管理？Pip：在 Windows 上安装 Python 包的轻松方式在 Windows 上安装 Python 包可能是一项艰巨的任务，特别是如果您在使用 EasyInstall 时遇到困难。幸运的是，EasyInstall 的后继者 Pip 提供了更加简化和简化的解决方案。在 Windows 上逐步安装 ...编程 发布于2024-12-23
-
如何在Python的`type()`和`isinstance()`之间进行选择以进行对象类型检查？如何确定对象的类型确定对象的类型对于保证数据一致性并相应地执行操作至关重要。 Python 为此目的提供了两个内置函数：type() 和 isinstance()。使用 type()type() 函数返回确切的类型一个物体的。例如：>>> type([]) is list True...编程 发布于2024-12-23
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
