全新更新日志模板 + 有史以来最大的 Tailwind UI 更新

Adam Wathan

自从我们在 12 月发布 Protocol 模板以来,我一直没有分享 Tailwind UI 的更新,但这并不是因为我们一直很闲。

在过去的四个月里,我们在 Tailwind UI 上所做的工作可能比以往任何时候都多,在终于完成了我们着手实现的目标之后,我很高兴向大家展示这一切!


Commit:为你的下一个想法而设的美观更新日志模板

就在几天前,我们发布了 Commit,这是一个我们为 Tailwind UI 设计的全新更新日志模板 —— 当然是用 Tailwind CSS 和 Next.js 构建的。

The Commit template

公开更新日志已成为一种非常流行的方式,让人们了解你一直在做的事情,保持责任感并锻炼你的交付能力。 当然,它们绝不是一个新概念,但我不认为直到 Linear 开始在其更新日志网站上发布内容后,其他人才开始对使用它们感到兴奋,几乎将其作为公司博客的替代品。

Commit 是我们对现代产品更新日志的理解,它被设计成一个单页网站,既可以作为你的项目主页,也可以作为你一直在做的一切事情的 feed。

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

查看 live demo 以获得完整体验,如果你已经是 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

我们检查了大量组件,对间距、排版和对比度进行了细微改进,结果感觉更加清晰和干净。

上面的示例来自 Description Lists 类别 —— 如果你想看到它在浏览器中完全呈现的效果,请在那里查看。

设计大量全新的示例

当我们在检查所有现有组件时,我们不断想出新的想法,这些想法感觉像是原始模式集中缺失的。

A collage of new component examples in Tailwind UI

因此,我们设计了大量全新的组件,试图填补我们注意到的尽可能多的漏洞。

许多类别的大小增加了一倍以上,例如 Feature Sections 类别,其中加载了非常出色的新想法。

添加更多深色变体

感觉现在我看到的几乎每个新网站默认都是深色的,因此我们觉得有道义上的义务为您提供更多针对深色背景优化的示例。

A collage of new dark component examples in Tailwind UI

我真正喜欢的示例之一是这些新的 dark badges —— 它们实际上并没有太多东西,但是背景颜色上的一点点不透明度对于深色设计来说效果非常好。

全新的页面示例

最后,我们将所有这些新东西放在一起,制作了一堆全新的页面示例来展示它们,包括每个人一直在催促我们的应用程序 UI 示例,这些示例来自我们一些营销组件中的屏幕截图。

A collage of new page examples in Tailwind UI

查看更新后的 Home Screens 类别示例,以查看其中一些新设计。


所以就是这样,毫无疑问,这是我们有史以来最大的 Tailwind UI 更新。自 1 月以来,我们一直在缓慢地发布这些改进,所有这些都记录在 Tailwind UI 更新日志中,如果你想更详细地了解更改的内容,请查看该日志。

接下来我们将深入研究我们为 Tailwind CSS v4.0 准备的大量想法,并探索我们的第一个 Next.js 应用程序 starter kit。很高兴在未来几周内分享更多内容!

直接在你的收件箱中获取我们所有的更新。
注册我们的新闻邮件。

Copyright © 2025 Tailwind Labs Inc.·商标政策