全新變更日誌範本 + Tailwind UI 有史以來最大更新

Adam Wathan

自從我們在 12 月發布 Protocol 範本以來,我一直沒有分享 Tailwind UI 的更新,但這並不是因為我們沒有在忙碌。

在過去的四個月裡,我們在 Tailwind UI 上所做的工作可能比以往任何時候都多,而且在終於完成我們設定的目標後,我很高興能向您展示這一切!


Commit:為您的下一個想法設計的精美變更日誌範本

就在幾天前,我們發布了 Commit,這是一個為 Tailwind UI 設計的全新變更日誌範本 - 當然是用 Tailwind CSS 和 Next.js 構建的。

The Commit template

公開的變更日誌已成為一種非常受歡迎的方式,可以讓人們了解您一直在做的事情,並保持責任感和建立您的發布能力。當然,它們並不是一個新的概念,但我認為直到 Linear 開始發布到他們的變更日誌網站後,其他人才開始對使用它們感到興奮,幾乎將其視為公司部落格的替代方案。

Commit 是我們對現代產品變更日誌的詮釋,設計為一個單頁網站,既可以作為您的項目首頁,也可以作為您一直在做的事情的摘要。

The Commit template in dark mode, partially scrolled down to reveal a second post

與我們所有的範本一樣,它充滿了功能和細節,使其成為一種令人愉悅的體驗,也讓您樂於使用它。

  • 淺色和深色模式支援,因為您不能在沒有針對凌晨 2 點關燈閱讀進行優化的情況下製作任何開發人員可能會閱讀的東西。
  • 手工製作的排版樣式,經過精心挑選的字體大小、間距、列表樣式等,專為此範本設計。
  • 內建語法高亮顯示,由 Shiki 提供支援,並且可以使用一些 CSS 變數輕鬆自訂。
  • 單檔案編輯體驗,每個條目都存在於一個單獨的 MDX 檔案中,因此更新您的變更日誌感覺就像更新開源專案中的 CHANGELOG.md 檔案一樣輕量級。
  • 精美的動畫和效果,這次由 Motion One 提供支援,使其成為研究如何使用尖端的新函式庫實現這些技巧的絕佳資源。

與往常一樣,很容易跳到程式碼中並使其成為您自己的程式碼 - 在這裡,我們只是調整了一些顏色,它就感覺像一個完全不同的網站

The Commit template customized to match the branding of the Motion One open-source library

請查看線上演示以獲得完整體驗,如果您已經是Tailwind UI 全存取授權的驕傲擁有者,請下載範本副本以在您的下一個專案中使用,或只是研究原始碼以學習一兩個新技巧。


重新設計 Tailwind UI 的數百個元件

設計變化很快,而且自從我們首次發布 Tailwind UI 以來已經過去三年多了,我們覺得它值得仔細檢視,並確保它仍然感覺像是我們最好的作品。

我們驚喜地發現,是的,在過去的三年裡,我們在設計方面確實變得更好了,因此我們花了四個月的時間埋頭苦幹,盡我們所能地利用我們新獲得的力量,使每個元件和類別都達到完美的像素。

A collage of redesigned page examples and components for Tailwind UI

當我們走出我們的洞穴再次看到陽光時,我們重新設計了數百個元件,整合了數十個全新的想法,並提供了一批新的頁面範例來展示它們。

以下是我們所做的一些改進類型摘要。

重新設計感覺過時的現有模式

Tailwind UI 中的許多元件模式都是非常經典的想法,但隨著設計趨勢的變化以及我們成為更好的設計師,這些模式的具體實作可能會開始讓人感覺像是來自另一個時代。

A comparison between an old component in Tailwind UI and it’s new redesigned version

我們逐一檢查了所有元件,並發現了許多我們想再次嘗試的模式,並盡力將它們帶入 2023 年。

查看Hero Sections類別,以了解這些更新模式的外觀。

全面微調細微細節

許多元件實際上並不需要完全重新設計,只需要稍微打磨一下。

A comparison between an old component in Tailwind UI and it’s new fine-tuned version

我們仔細檢查了大量的元件,對間距、排版和對比度進行了細微的改進,結果感覺更加清晰和乾淨。

上面的範例來自描述清單類別 - 如果您想查看它在完整瀏覽器渲染中的效果,請在那裡查看。

設計大量的全新範例

當我們瀏覽所有現有元件時,我們不斷提出新的想法,這些想法感覺像是原始模式集中所缺乏的。

A collage of new component examples in Tailwind UI

因此,我們設計了大量全新的元件,試圖填補我們認為突出的所有漏洞。

許多類別的規模都增加了一倍以上,例如功能區塊類別,其中載有許多真正出色的新想法。

新增更多深色變體

感覺現在我看到的幾乎每個新網站預設都是深色的,因此我們覺得有道義上的義務為您提供更多針對深色背景優化的範例。

A collage of new dark component examples in Tailwind UI

我個人非常喜歡的一個例子是這些新的深色徽章 — 它們實際上並沒有太多特別之處,但是背景顏色上的那一絲透明度對於深色設計來說是一個非常棒的效果。

全新的頁面範例

最後,我們將所有這些新東西整合在一起,製作了一系列全新的頁面範例來展示它們,包括大家一直在催促我們的應用程式 UI 範例,這些範例來自我們一些行銷組件的螢幕截圖。

A collage of new page examples in Tailwind UI

例如,請查看更新後的首頁畫面類別,以查看其中一些新設計。


所以,這就是目前為止我們最大的 Tailwind UI 更新。自一月份以來,我們一直在逐步釋出這些改進,所有內容都記錄在Tailwind UI 更新日誌中,如果您想更詳細地了解變更內容,請查看該日誌。

接下來,我們將深入研究我們為 Tailwind CSS v4.0 提出的許多想法,並探索我們的第一個 Next.js 應用程式起始套件。很高興在未來幾週分享更多資訊!

將我們所有的更新直接發送到您的收件匣。
訂閱我們的電子報。