我们为你打造了一个全新的个人网站，以及 Heroicons v2.0、Headless UI v1.7 等

过去的一周我们一直在忙着完成一些项目，现在终于全部发布了，感觉是时候更新一下了。

自从我上次发帖以来，我们已经处理并解决了另外 226 个 GitHub 问题和拉取请求，我们终于在整个组织中将未解决的问题/PR 数量降至 50 个以下，这是前所未有的。所以请不要再找 bug 了，我只想用 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 个以三种不同风格绘制的图标

Outline — 带有 1.5px 粗细的线条图标，绘制在 24px 的视窗中。
Solid — 带有填充形状的实心图标，绘制在 24px 的视窗中。
Mini — 带有填充形状的实心图标，绘制在 20px 的视窗中。

与 v1 最大的区别在于，轮廓集使用更细的笔触，这在当今看起来更现代和时尚，从视觉上看，图标的风格也更活泼。

尽管这些图标的名称中包含“v2”，但最好将 Heroicons v2 视为类似于 Terminator 2 而不是 OpenSSL 2——我们认为它们代表了我们最好的作品，但它是一个新的图标集，而不是对原始图标集的严格升级。不要因为这是一个真正的应用程序依赖项而被迫升级现有项目，但如果您想迁移，请查看发布说明，了解切换所需的一切。

要探索所有新图标，请访问我们与新图标集一起推出的完全重新设计的 Heroicons 网站。

Headless UI v1.7

本周早些时候，我们标记了Headless UI的新版本，它是我们的 React 和 Vue 无样式 UI 组件库。

Headless UI v1.7 包含通常的错误修复和改进，但也包含一些非常有用的新功能！

添加了“by”属性来控制对象比较

我们为 `Listbox`、`Combobox` 和 `RadioGroup` 组件添加了一个新的 `by` 属性，它使将对象绑定为表单值变得更加容易。

`by` 属性允许您指定对象的哪个属性用于比较，这样绑定值和潜在值列表中的对应值就不再需要是完全相同的对象实例。

import { Listbox } from '@headlessui/react'

const departments = [
  { id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
  { id: 2, name: 'HR', contact: 'Kenton Towne' },
  { id: 3, name: 'Sales', contact: 'Therese Wunsch' },
  { id: 4, name: 'Finance', contact: 'Benedict Kessler' },
  { id: 5, name: 'Customer service', 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>Submit</button>
    </form>
  )
}

当使用传统的 HTML 表单或使用 `FormData` 收集其状态而不是使用 React 状态跟踪其状态的表单 API 时，这可以简化您的代码。

查看每个组件的 “作为非受控组件使用” 文档以查看更多示例。

用于 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="hidden ui-selected:block" />
  {person.name}
</Listbox.Option>

查看有关使用数据属性设置样式的新文档，以了解更多详细信息。

Tailwind Play 上的内部人员支持

并非每个人都知道这一点，但我们向 npm 发布了 Tailwind CSS 的 insiders 版本，该版本在每次新的提交进入存储库时都会自动构建和部署。这使得在实际发布之前测试新功能和修复变得非常容易。

现在，我们还在 Tailwind Play 中包含对内部人员版本的访问权限，因此您无需设置项目即可使用最前沿的功能。

我们只在 Play 上保留最新的内部人员版本，因此，如果您使用内部人员版本创建演示，请注意，如果下一个内部人员版本更改了您正在使用的某个未发布功能，它可能会中断。您不应该将重要内容放在那里，来吧，做一个专业人士。

Tailwind CSS + Phoenix v1.7

前段时间，我们开始与 Phoenix 团队进行沟通，因为他们希望在未来的版本中默认提供 Tailwind CSS。我认为这非常令人兴奋，并希望与他们合作，使开箱即用的体验真正美观。

我们设计了一个新的启动画面，以及他们生成器系统所需的所有脚手架，这些将在 Phoenix v1.7 中发布。

Phoenix 的创建者 Chris McCord 上周发表了精彩演讲，介绍了他们发布的所有 Tailwind CSS 内容，如果您想了解更多信息，值得一看。

所以，这就是我们过去几周一直在努力的最新内容！

在接下来的一个月左右的时间里，我将很高兴构建我们一直在设计的许多新的 Tailwind UI 组件，探索一些 Tailwind CSS 的新功能想法，并开始进行一些研发工作，看看使用 Tailwind + Next.js 创建一种应用程序启动套件模板会是什么样子——我认为如果我们能做到这一点，会非常酷。

下次更新再见！