这一周很忙，我们结束了一些项目，但一切终于都完成了，所以现在是时候进行另一次更新了。
自我上次发布以来，我们处理并解决了另一个 226个 GitHub 问题和拉取请求，我们组织内的开放问题/PR 数量终于首次降至50个以下。所以请不要再找错误了，我只想用 Tailwind CSS 设计和构建美丽的东西一段时间。
说到美丽的东西，以下是过去几周发布的内容！
聚光灯：您的新个人网站
几天前，我们发布了 Spotlight，这是一个我们为 Tailwind UI 设计的令人惊叹的新个人网站模板。
和我们的其他模板一样，它是使用 Next.js 构建的，这一次我们使用 MDX 来支持所有的基于 markdown 的内容，比如博客部分。
设计这个模板是一个相当有趣和有趣的挑战——我们想要创建一个既美丽又鼓舞人心的东西，同时又使其足够不带偏见，以便几乎适合任何人。我们最终选择了一种非常简约的设计，通过旋转的图像、链接的色彩提示，以及在顶部导航等地方的阴影和层次感来赋予其个性。
和往常一样，我推荐查看 现场预览，以获得完整体验——特别注意主页面上头像和导航的滚动效果，真正的网站上玩起来会让你感受到 大厨之吻。
我们试图以一种我们会构建自己个人网站的方式来组织这个网站，因此它包括一个专门的博客，一个页面供您列出您工作过的一些最喜欢的项目，一个区域供您链接到您所做的会议演讲，以及一个 "使用" 页面，列出您所有喜爱的工具和装备。
如果您拥有 Tailwind UI 全通行证 许可证，那么您已经可以访问这个模板了！如果您没有，考虑一下——这是支持我们在 Tailwind CSS、Headless UI 和 Heroicons 等开源项目上工作的最佳方式。
Heroicons v2.0
去年我们发布了 Heroicons v1.0。上周我们发布了 Heroicons v2.0，这是一个全新从零开始绘制的图标集，Steve 已经在上面工作了大约一年。
它包括280个以三种不同风格绘制的图标：
- 轮廓 — 1.5px 线条的线性图标，绘制在24px视口中。
- 实心 — 填充形状的实心图标，绘制在24px视口中。
- 迷你 — 填充形状的实心图标，绘制在20px视口中。
与v1相比最大的区别是轮廓集使用了更细的笔划，这在现在看起来更现代和时尚，视觉上图标的风格也更具趣味性。
尽管这些名称中有“v2”，但我们认为 Heroicons v2 更像是终结者 2 而不是 OpenSSL 2——我们觉得它们代表了我们的最佳作品，但它是一个新的图标集，而不仅仅是原始图标集的升级。无需感到压力去升级现有项目，就像处理真实的应用程序依赖性一样，但如果您想迁移，请 查看发布说明 以获取所需的所有信息。
要探索所有新图标，请访问我们与新图标集一起推出的完全 重新设计的 Heroicons 网站。
Headless UI v1.7
本周早些时候，我们发布了 Headless UI 的新版本，这是我们未样式化的 UI 组件的 React 和 Vue 库。
Headless UI v1.7 包含了一系列常规的错误修复和改进，但也带来了一些非常有用的新特性！
添加 "by" 属性以控制对象比较
我们向 Listbox、Combobox 和 RadioGroup 组件添加了一个新的 by 属性，使绑定一个对象作为表单值变得不那么繁琐。
import { Listbox } from "@headlessui/react";const departments = [ { id: 1, name: "市场部", contact: "Durward Reynolds" }, { id: 2, name: "人力资源", contact: "Kenton Towne" }, { id: 3, name: "销售部", contact: "Therese Wunsch" }, { id: 4, name: "财务部", contact: "Benedict Kessler" }, { id: 5, name: "客户服务", contact: "Katelyn Rohan" },];function DepartmentPicker({ selectedDepartment, onChange }) { return ( <Listbox value={selectedDepartment} by="id" onChange={onChange}> <Listbox.Button>{selectedDepartment.name}</Listbox.Button> <Listbox.Options> {departments.map((department) => ( <Listbox.Option key={department.id} value={department}> {department.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> );}这使得值来自组件外部变得更加简便，并且节省了您仅绑定 id 或类似值的需要，也不必在需要时自己查找完整对象。
请查看更新的 "将对象作为值绑定" 文档 以获取更多详细信息。
将表单控件用作非受控组件
Listbox、Combobox 和 RadioGroup 组件现在让您可以选择性地传递 defaultValue 而不是 value，允许您将它们用作非受控组件。
import { Listbox } from "@headlessui/react";const people = [ { id: 1, name: "Durward Reynolds" }, { id: 2, name: "Kenton Towne" }, { id: 3, name: "Therese Wunsch" }, { id: 4, name: "Benedict Kessler" }, { id: 5, name: "Katelyn Rohan" },];function Example() { return ( <form action="/projects/1/assignee" method="post"> <Listbox name="assignee" defaultValue={people[0]}> <Listbox.Button>{({ value }) => value.name}</Listbox.Button> <Listbox.Options> {people.map((person) => ( <Listbox.Option key={person.id} value={person}> {person.name} </Listbox.Option> ))} </Listbox.Options> </Listbox> <button>提交</button> </form> );}当使用传统的 HTML 表单或通过 FormData 收集状态的表单 API 时，这可以简化您的代码，而不是使用 React 状态跟踪。
请查看各组件的 "作为非受控组件使用" 文档 来查看更多示例。
数据属性用于仅 CSS 状态样式
历史上，您总是需要通过检查传递给渲染属性的参数来样式化 Headless UI 组件的不同状态，并条件性地渲染适合的类或内容。当您仅仅想调整背景颜色或进行其他仅 CSS 的更改时，这可能会感觉很繁琐。
在 Headless UI v1.7 中，我们向渲染的 HTML 添加了一个 data-headlessui-state 属性，其中包含有关当前状态的信息，因此您可以仅使用 CSS 进行目标样式设置。
我们还发布了一个新的 @headlessui/tailwindcss 插件，为这些状态提供变体，因此可以仅使用 Tailwind CSS 类进行样式设置：
<Listbox.Option key={person.id} value={person} className="ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-black"> <CheckIcon className="ui-selected:block hidden" /> {person.name}</Listbox.Option>请查看关于 使用数据属性进行样式设置的新文档以获取更多详细信息。
在 Tailwind Play 上支持 Insider
并不是每个人都知道，我们会将 Tailwind CSS 的 insiders 版本发布到 npm 上，每当新的提交在仓库中落地时，都会自动构建和部署。这使得在正式发布之前测试新功能和修复变得非常简单。
现在，我们也在 Tailwind Play 中包括对 Insider 版本的访问，因此您可以在无需设置项目的情况下玩出尖端的东西：
我们只在 Play 上保留最新的 Insider 版本，所以如果您使用 Insider 版本创建演示，请知道如果下一个 Insider 版本改变了您使用的一些未发布功能，它可能会崩溃。您不应该将重要内容放在那里，增加专业素养。
Tailwind CSS + Phoenix v1.7
不久前，我们开始与 Phoenix 团队进行交谈，因为他们希望在未来的版本中默认发行 Tailwind CSS。我觉得这是非常令人激动的，并希望与他们合作以使开箱体验更加美丽。
我们设计了一个新的启动界面和他们生成器系统所需的所有必要支架，这将在 Phoenix v1.7 中发布。
Phoenix 的创建者 Chris McCord 上周进行了一次很棒的 演讲，详细讲述了他们所发布的所有 Tailwind CSS 内容，如果您想了解更多，值得一看。
所以，这就是我们过去几周所做的所有酷炫的事情！
在接下来的一个月左右的时间里，我期待构建一批我们正在设计的新 Tailwind UI 组件，探索一些 Tailwind CSS 的新特性想法，并开始对使用 Tailwind + Next.js 创建一种应用程序启动工具包模板的样子进行一些研发——如果我们能做到这一点，我想它会非常酷。
下次更新见！