Tailwind v 中令人兴奋的更新
浏览：788
几个月前（撰写本文时），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 的人可能会给我一些反馈？
肯定有一些有争议的新功能，我想得到一些意见？总结：发表评论！
感谢您的阅读！
最佳代码
-
如何使用 MySQL 查找今天生日的用户？如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现，该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户： FROM USERS ...编程 发布于2024-12-23 -
如何修复 macOS 上 Django 中的“配置不正确：加载 MySQLdb 模块时出错”？MySQL配置不正确：相对路径的问题在Django中运行python manage.py runserver时，可能会遇到以下错误：ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...编程 发布于2024-12-23
-
如何在 PHP 中组合两个关联数组，同时保留唯一 ID 并处理重复名称？在 PHP 中组合关联数组在 PHP 中，将两个关联数组组合成一个数组是一项常见任务。考虑以下请求：问题描述：提供的代码定义了两个关联数组，$array1 和 $array2。目标是创建一个新数组 $array3，它合并两个数组中的所有键值对。 此外，提供的数组具有唯一的 ID，而名称可能重合。要求...编程 发布于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
-
除了“if”语句之外：还有什么地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型？无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换，使您能够在条件语句中直接使用其实例“t”。然而，这种显式转换提出了一个问题：“t”在哪里可以在不进行强制转换的情况下用作 bool？上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句：if、whi...编程 发布于2024-12-23
-
插入数据时如何修复“常规错误：2006 MySQL 服务器已消失”？插入记录时如何解决“一般错误：2006 MySQL 服务器已消失”介绍：将数据插入 MySQL 数据库有时会导致错误“一般错误：2006 MySQL 服务器已消失”。当与服务器的连接丢失时会出现此错误，通常是由于 MySQL 配置中的两个变量之一所致。解决方案：解决此错误的关键是调整wait_tim...编程 发布于2024-12-23
-
在 Go 中使用 WebSocket 进行实时通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...编程 发布于2024-12-23
-
尽管代码有效，为什么 POST 请求无法捕获 PHP 中的输入？解决 PHP 中的 POST 请求故障在提供的代码片段中：action=''而不是：action="<?php echo $_SERVER['PHP_SELF'];?>";?>"检查 $_POST数组：表单提交后使用 var_dump 检查 $_POST 数...编程 发布于2024-12-23
-
为什么我的 Angular HTTP POST 值在 PHP 中未定义，如何修复它？Angular HTTP POST 到 PHP：处理未定义的 POST 值在 AngularJS 中，对 PHP 端点执行 HTTP POST 请求有时会导致未定义的值服务器端的 POST 值。当预期数据格式与 Angular 应用程序发送的实际数据不匹配时，就会发生这种情况。要解决此问题，确保正确...编程 发布于2024-12-23
-
Go可以访问初始标准输入流吗？在 Go 中，您可以访问初始标准输入吗？在 Go 中，使用 os.Stdin 从原始标准输入读取应该会产生所需的结果，如图所示通过这个代码片段：package main import "os" import "log" import "io"...编程 发布于2024-12-23
-
极简密码管理器桌面应用程序：进军 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
-
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
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
