這週我們忙著收尾一些正在進行的專案，但所有的東西終於都完成了，所以現在是個更新的好時機。
自從我上次發文以來，我們分類並解決了另外 226 個 GitHub 問題和 pull request，而且我們整個組織的未解決問題/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: "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 狀態樣式的資料屬性
過去，您總是必須透過檢查透過 render 屬性傳遞的引數並有條件地呈現任何有意義的類別或內容，來設定 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 上的 Insiders 支援
並非每個人都知道，但我們會將 Tailwind CSS 的 insiders 組建發布到 npm，每次新提交進入儲存庫時，都會自動建構和部署。這讓您可以在實際標記為正式版本之前，非常輕鬆地測試新功能和修正。
現在，我們也在 Tailwind Play 中提供對 insiders 組建的存取權，因此您可以在不設定專案的情況下使用尖端功能
我們只在 Play 上保留最新的內部測試版本，因此如果您使用內部測試版本建立演示，請注意，如果下一個內部測試版本更改了您正在使用的某些未發布功能，則可能會導致演示損壞。無論如何，您不應該把重要的東西放在那裡，拜託，專業一點。
Tailwind CSS + Phoenix v1.7
前陣子我們開始與 Phoenix 團隊洽談，因為他們希望在未來版本中預設搭載 Tailwind CSS。我認為這非常令人興奮，並希望與他們合作，讓開箱即用的體驗更加美好。
我們為他們的產生器系統設計了一個新的啟動畫面和所有必要的基礎架構，這將作為 Phoenix v1.7 的一部分發布。
Phoenix 的創建者 Chris McCord 上週做了一個很棒的 演講，介紹了他們正在發布的所有 Tailwind CSS 相關內容，如果您有興趣了解更多，非常值得一看。
以上就是我們過去幾週一直在開發的最酷的所有內容！
在接下來的一個月左右，我很高興能夠建構我們一直在設計的一系列新的 Tailwind UI 組件，探索 Tailwind CSS 的一些 新功能想法，並開始研發使用 Tailwind + Next.js 創建一種應用程式啟動工具包範本會是什麼樣子——如果我們能夠成功，我認為會非常酷。
下次更新再見！