更新日志
随时了解我们对 Tailwind Plus 所做的所有最新添加和改进。
Tailwind CSS v4.0 支持
我们已更新 Tailwind Plus 中的所有示例，以支持 Tailwind CSS v4.0！在任何组件的“代码”选项卡中，您现在可以找到一个选择器，用于在 v4.0 和 v3.4 之间切换。
版本之间的差异非常小，但 v4.0 代码片段确保利用 v4 中引入的新功能来简化代码，并处理此版本中的任何重大更改。
请参阅公告帖子，了解有关 Tailwind CSS v4.0 的更多信息。
新的内容部分、页脚和功能部分
我们刚刚添加了五个新的营销区块，灵感来自我们最近为 Radiant 模板设计的一些想法。
我们添加了一个全新的内容部分，其中包含图像平铺和统计数据——非常适合关于页面。
还有一个新的功能部分示例，其中包含一个大的屏幕截图，并以时尚的玻璃边框镶边。当您想要显示应用程序的突出屏幕截图时，此示例非常有用，提供浅色和深色版本。
最后，我们添加了一个新的页脚示例，其中包含一个突出的行动号召，适合那些喜欢大型网站页脚的人。这个页脚也提供浅色和深色版本。
新的定价表示例
我们刚刚添加了一个巨大的新定价部分示例，其中包含精美的玻璃定价卡、徽标云和一个完整的功能比较表，该表在移动设备上会自动巧妙地切换到选项卡。
与往常一样，我们对所有小细节都精雕细琢，因此您不必这样做，例如微调所有断点、使语义标记恰到好处，并确保屏幕阅读器可以访问所有内容。
Bento 网格
我们刚刚在营销组件系列中添加了一个全新的 Bento 网格类别，其中包含三个设计精美的示例，可帮助您入门。
这些似乎是目前流行的，它们非常适合作为营销网站上的功能部分。
在您的下一个项目中尝试一下——我们设计它们时考虑到了定制性，使您可以非常轻松地将图形替换为您自己的屏幕截图，而无需自己费心处理所有细节。
Radiant：一个适用于您的 SaaS 业务的精美多页营销网站
我们刚刚发布了 Radiant，这是一个使用 Next.js、Tailwind CSS 构建的精美多页 SaaS 营销模板，并由 Sanity 提供博客支持。
我们在这个模板的动画上投入了很多乐趣，并设计了一组非常通用的交互式营销组件，这些组件易于适应完全不同的产品。
这也是我们首次在模板中尝试使用无头 CMS，使其成为在您自己的 Tailwind CSS 和 Next.js 项目中连接 Sanity 等工具的绝佳参考。
改进了与 React Server Components 的兼容性
Tailwind UI 中的 React 示例现在更易于与 React Server Components (RSC) 一起使用。
服务器组件不支持将函数作为 props 传递，因此在 Tailwind UI 中我们执行此操作的任何地方，您都需要将父组件设为客户端组件，即使该组件没有实际的交互性。
使用 Headless UI v2.0 中的新 data-* 状态属性，我们能够删除所有用于根据组件状态有条件地应用不同类的渲染 props。
我们还更新了任何确实需要成为客户端组件的组件，以在示例顶部包含 'use client'，以便您可以将它们复制并粘贴到您的 RSC 项目中，它们可以立即工作。
React 的 Headless UI v2.1
我们刚刚更新了 Tailwind UI 中的所有 React 组件以及我们的 Next.js 模板，以使用 Headless UI v2.1 中发布的新数据属性过渡 API。
请参阅我们的公告帖子，了解有关此新过渡 API 的更多信息。
Catalyst：应用程序布局、导航菜单、描述列表等
自从发布开发预览版以来，我们刚刚发布了 Catalyst 的首次重大更新，其中包含两个新的应用程序布局、导航栏和侧边栏组件、描述列表等。
以下是所有新组件的完整列表，JavaScript 和 TypeScript 版本均可用
我们也很高兴分享，随着 React 的 Headless UI v2.0 的发布，Catalyst 不再处于开发预览阶段——它已正式稳定，您可以立即在生产环境中使用它，而无需担心底层依赖项中的重大更改。
查看我们全新的实时演示站点，亲自了解完整的 Catalyst 项目在这些更新后的外观和感觉。
React 的 Headless UI v2.0
我们刚刚更新了 Tailwind UI 中的所有 React 组件以及我们的 Next.js 模板，以使用 Headless UI v2.0，这是我们几周前发布的该库的最新主要版本。
Headless UI v2.0 充满了新功能，包括内置锚点定位、新的复选框组件、组合框列表虚拟化等等。请参阅我们的公告帖子，了解所有详细信息。
我们建议将现有的 Headless UI v1.x 项目升级到最新版本，并整理了一份详细的升级指南，解释了所有更改内容。
隆重推出 Catalyst：适用于 React 的现代应用程序 UI 套件
我们刚刚发布了 Catalyst 的首个开发预览版，这是我们首个完全组件化、包含所有功能的 React 应用程序 UI 套件——真正的组件具有经过深思熟虑设计的 API，它们相互构建以创建真正的组件架构，就像我们在实际应用程序中所做的那样。
还有更多内容即将推出，但我们今天发布它是为了让您在继续构建新组件并寻找使体验更好的方法时，可以立即使用它。
Next.js 站点模板现在提供 TypeScript 版本
我们所有的 Next.js 站点模板现在都提供 JavaScript 和 TypeScript 两种版本，因此您可以选择更适合您和您的团队的语言。
当您下载模板时，您会在 zip 文件中找到两个文件夹——/{template}-js 和 /{template}-ts，每个文件夹都包含相应语言的整个模板的源代码。
每个模板都是由对正确类型感到非常满意的技术人员使用最新版本的 TypeScript 编写的，因此如果 TypeScript 是您的菜，您应该会发现体验非常令人满意。
认识 Studio：一个精美的新多页代理机构模板
我们刚刚发布了 Studio，这是一个使用 Tailwind CSS 和 Next.js 构建的精美的新多页代理机构模板。这是我们迄今为止最大的模板，它利用了 Next.js 中的新应用程序路由器。
我们在这个模板上真正注重细节，例如使用 Framer Motion 在整个模板中巧妙地包含细微的动画，以及 MDX 使案例研究和博客文章创作体验非常棒。
全新的应用程序 UI 页面 + 巨大的组件更新
我们刚刚发布了一个大型应用程序 UI 刷新，其中包括完全重新设计的页面示例，以及数十个更新的和全新的组件。
新的页面示例包括浅色和深色设计，还包括每个人都在询问我们、在一些新的营销组件中用作屏幕截图的备受追捧的主屏幕设计。
我们还检查了所有现有的组件类别，以寻找改进机会，包括新的徽章、堆叠列表、表格、表单布局、统计数据部分等。
- 更新了徽章类别，增加了 18 种新设计
- 更新了按钮类别，增加了 3 种新设计
- 更新了描述列表类别，增加了 7 种新设计
- 更新了信息流类别，增加了 1 种新设计
- 更新了表单布局类别，增加了 5 种新设计
- 更新了网格列表类别，增加了 1 种新设计
- 更新了多列布局类别，增加了 6 种新设计
- 更新了页面标题类别，增加了 2 种新设计
- 更新了侧边栏布局类别，增加了 8 种新设计
- 更新了侧边栏导航类别，增加了 5 种新设计
- 更新了登录和注册类别，增加了 5 种新设计
- 更新了堆叠列表类别，增加了 17 种新设计
- 更新了统计数据类别，增加了 2 种新设计
- 更新了表格类别，增加了 3 种新设计
- 更新了选项卡类别，增加了 1 种新设计
- 更新了垂直导航类别，增加了 5 种新设计
隆重推出 Commit：一个精美的新更新日志模板
我们刚刚发布了 Commit，这是一个使用 Tailwind CSS、Next.js、MDX 和少量 Motion One 构建的精美新更新日志模板。
受纯文本 CHANGELOG 文件的启发，我们以一种方式构建了整个模板，您可以从一个光荣的 markdown 文件中管理所有内容——只需在您的上一篇文章上方放置一条水平线并开始键入即可。
全新的营销页面示例 + 大量组件更新
如果您一直在密切关注，您可能已经注意到过去几周营销类别中到处都是“新”徽章。
我们决定是时候给所有营销组件重新粉刷一下了，首先是所有页面示例的全新设计
我们还更新了每个单独的营销组件类别，其中包含新设计，包括精美的新定价部分、客户评价、徽标云、团队部分、统计数据等等。
- 更新了定价部分类别，增加了 13 种新设计
- 更新了客户评价类别，增加了 9 种新设计
- 更新了徽标云类别，增加了 12 种新设计
- 更新了内容部分类别，增加了 6 种新设计
- 更新了横幅类别，增加了 13 种新设计
- 更新了博客部分类别，增加了 7 种新设计
- 更新了联系方式部分类别，增加了 8 种新设计
- 更新了飞出菜单类别，增加了 7 种新设计
- 更新了页眉部分类别，增加了 10 种新设计
- 更新了页眉类别，增加了 12 种新设计
- 更新了新闻通讯部分类别，增加了 7 种新设计
- 更新了统计数据部分类别，增加了 10 种新设计
- 更新了团队部分类别，增加了 9 种新设计
- 更新了行动号召部分类别，增加了 2 种新设计
- 更新了功能部分类别，增加了 2 种新设计
- 更新了页脚类别，增加了 1 种新设计
- 更新了Hero 部分类别，增加了 2 种新设计
新的 Protocol 模板
今天，我们很高兴宣布推出新的 Protocol 模板，这是一个精心制作的文档模板，专为 API 参考而调整。
由 MDX 提供支持，我们竭尽全力处理所有细枝末节，以确保创作体验非常棒，让您专注于编写出色的 API 文档，而不是围绕它的工具。
新的 Spotlight 模板
今天，我们很高兴宣布推出新的 Spotlight 模板，一个如此出色的个人网站，它实际上会激发您在上面发布内容。
它使用 Tailwind CSS 和 Next.js 构建，包含启动和运行个人网站所需的一切，包括博客、项目页面、深色模式等等。与往常一样，它是由 Tailwind CSS 团队设计和构建的。
Tailwind UI 模板
今天，我们很高兴宣布推出 Tailwind UI 模板！
这些是视觉效果惊艳、易于定制的站点模板，使用 React 和 Next.js 构建。是您下一个项目的完美起点，也是学习专家如何使用 Tailwind CSS 构建真实网站的终极资源。
- Salient 模板 - 一个精美的 SaaS 着陆页，用于宣布您的下一个伟大创意。
- Transmit 模板 - 一个干净且专业的播客模板，适合任何节目。
- Syntax 模板 - 使用此文档模板，以时尚的方式教育您的用户。
- Keynote 模板 - 使用这个引人注目的模板，为您的下一次会议盛大开幕。
- Primer 模板 - 一个令人惊叹的着陆页，适合您的第一门课程或电子书。
新增功能
- 在应用程序 UI 包中添加了 16 个新的 表格 示例
新增功能
- 在应用程序 UI 包中添加了新的 日历 类别，包含 8 个示例
Tailwind UI 电子商务
今天，我们很高兴宣布推出 Tailwind UI 电子商务！
经过近 6 个月的制作，我们终于发布了自 2020 年 2 月首次发布以来，Tailwind UI 的首个全新组件套件。
Tailwind UI 电子商务增加了超过 100 个新组件，涵盖 14 个新组件类别和 7 个新页面示例类别
- 在电子商务包中添加了新的 产品概览 类别，包含 5 个示例
- 在电子商务包中添加了新的 产品列表 类别，包含 11 个示例
- 在电子商务包中添加了新的 类别预览 类别，包含 6 个示例
- 在电子商务包中添加了新的 购物车 类别，包含 6 个示例
- 在电子商务包中添加了新的 类别过滤器 类别，包含 5 个示例
- 在电子商务包中添加了新的 产品快速查看 类别，包含 4 个示例
- 在电子商务包中添加了新的 产品功能 类别，包含 9 个示例
- 在电子商务包中添加了新的 商店导航 类别，包含 5 个示例
- 在电子商务包中添加了新的 促销部分 类别，包含 8 个示例
- 在电子商务包中添加了新的 结账表单 类别，包含 5 个示例
- 在电子商务包中添加了新的 评论 类别，包含 4 个示例
- 在电子商务包中添加了新的 订单摘要 类别，包含 4 个示例
- 在电子商务包中添加了新的 订单历史记录 类别，包含 4 个示例
- 在电子商务包中添加了新的 激励 类别，包含 8 个示例
- 在电子商务包中添加了新的 店面页面 类别，包含 4 个示例
- 在电子商务包中添加了新的 产品页面 类别，包含 5 个示例
- 在电子商务包中添加了新的 类别页面 类别，包含 5 个示例
- 在电子商务包中添加了新的 购物车页面 类别，包含 3 个示例
- 在电子商务包中添加了新的 结账页面 类别，包含 5 个示例
- 在电子商务包中添加了新的 订单详情页面 类别，包含 3 个示例
- 在电子商务包中添加了新的 订单历史记录页面 类别，包含 5 个示例
React 和 Vue 支持
今天，我们很高兴为 Tailwind UI 中的所有示例添加对 React 和 Vue 3 的一流支持，这使得它们更容易适应您的项目。
这是一段漫长的旅程，但我为我们最终的结果感到非常自豪，并且真的认为这将使 Tailwind UI 成为对全新 Tailwind CSS 用户群体有用的工具。
- 功能强大且可访问 —— Tailwind UI 中的所有 React 和 Vue 示例均由 Headless UI 提供支持，后者为您处理所有 ARIA 属性管理、键盘交互、焦点处理等，同时将所有棘手的复杂性安全地隐藏在您的
node_modules文件夹中，我们可以在那里代表您进行改进和修复错误，而您无需更改自己的代码。 - 完全可定制 —— 借助 Headless UI，我们设法抽象出了所有复杂的 JS 功能，而没有剥夺对实际标记的任何控制权。这意味着整个设计仍然完全在您的控制之下，您可以通过简单地添加和删除像您习惯的那样的实用程序类来完全自定义任何示例。
所有这些内容都作为 Tailwind UI 客户的完全免费更新提供。只需登录您的帐户，在任何组件上方的下拉列表中选择 HTML、React 或 Vue，然后以您想要的格式获取代码。
新增功能
- 新增前三个 主屏幕示例 到应用程序 UI 包
新增功能
- 新增 滑动面板 类别到应用程序 UI 包，包含 6 个示例
新增功能
- 新增 选择菜单 类别到应用程序 UI 包，包含 6 个示例
新增功能
- 新增 警告提示 类别到应用程序 UI 包，包含 6 个示例
- 新增 联系方式区块 类别到营销包，包含 6 个示例
- 修复了 带有紧凑型白色页面标题的品牌导航 堆叠布局中侧边栏个人资料部分上方的边框颜色（从
border-gray-700更改为border-indigo-800）
新增功能
- 新增 统计数据 类别到应用程序 UI 包，初始包含 3 个组件
- 新增 通知 类别到应用程序 UI 包，初始包含 6 个组件
- 新增 博客区块 类别到营销包，初始包含 3 个组件
- 将 切换开关 组件上的
flex-no-shrink更正为flex-shrink-0 - 修复了 Firefox 中 描述列表 组件的截断问题（参见 https://github.com/tailwindui/issues/issues/71）
- 修复了侧边栏布局中的画布外菜单对于非常小的屏幕来说过宽的问题（参见 https://github.com/tailwindui/issues/issues/2）
辅助功能改进
本周我们开始与一位辅助功能顾问合作，他一直在审查我们的早期访问组件，并确保我们遵循所有最佳实践。
- 通过
aria-labelledby和aria-describedby将 带有切换开关的操作面板 上的链接切换到标题/描述 - 在 堆叠布局 中为 logo 图片添加 alt 属性
- 在 堆叠布局 中的仅图标按钮中添加
aria-label属性（例如，钟形按钮上的aria-label="通知"） - 在 堆叠布局 中的头像下拉菜单中添加菜单语义
新增功能
- 新增 操作面板 类别，初始包含 8 个组件
- 新增 布局容器 类别，初始包含 4 个组件
- 新增 布局面板 类别，初始包含 10 个组件
- 新增两个 表单布局 示例（带有单独提交操作的两列卡片和全宽卡片中的两列）
- 新增一个 “带有强调层级的三层” 定价区块示例
- 新增 营销横幅，包含 4 个组件（我们在第一天就完成了这些，但由于配置错误，它们一直意外地处于不可见状态！哎呀。）
- 修复了 页面标题 和 卡片标题 中按钮的焦点/活动样式（这些与我们在 Tailwind UI 中其他地方使用的按钮样式略有不一致）
- 调整了 带有灰色页脚的模态框 组件的页脚内边距（我们最初使用了
py-4，但py-3更一致） - 我们描述列表组件上的
dd和dt元素放反了 —— 我们现在已经修复了！