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

Adam Wathan

我自从去年十二月发布了 Protocol 模板 之后就没有分享过 Tailwind UI 更新,但这并不是因为我们没有忙碌。

在过去的四个月里,我们在 Tailwind UI 上的工作可能多于以往,而我们终于完成了初衷,非常期待向您展示这一切!


Commit:为您的下一个想法设计的美丽变更日志模板

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

Commit 模板

公共变更日志已成为一种非常流行的方式,帮助人们了解您正在进行的工作,并保持责任感、提升出货能力。当然,它们并不是一个新的概念,但我认为直到 Linear 开始在他们的变更日志网站上发布,其他人才开始对使用它们作为公司博客的替代品感到兴奋。

Commit 是我们对现代产品变更日志的看法,设计成一个单页面网站,可以作为您的项目主页和您所做一切工作的展示。

夜间模式下的 Commit 模板,部分滚动以显示第二篇文章

像我们所有的模板一样,它充满了功能和细节,令人赏心悦目、令人愉快:

  • 支持明暗模式,因为您不能制作开发者可能会阅读的内容,而不针对凌晨2点灭灯情况下的阅读进行优化。
  • 手工制作的排版风格,经过精心挑选的字体大小、间距、列表样式等,专门为此模板设计。
  • 内置语法高亮,由 Shiki 提供支持,并可通过几个 CSS 变量轻松自定义。
  • 单文件编辑体验,每个条目都位于一个单一的 MDX 文件中,因此更新您的变更日志就像在开源项目中更新 CHANGELOG.md 文件一样轻便。
  • 美丽的动画和效果,此次由 Motion One 提供支持,是研究如何使用这一尖端新库实现这些技巧的绝佳资源。

一如既往,跳入代码并使其成为自己的也很简单——在这里我们仅调整了一些颜色,它感觉就像是一个完全不同的网站:

与 Motion One 开源库的品牌匹配的 Commit 模板

查看 实时演示 以获得完整体验,如果您已经是 Tailwind UI 全访问 许可证的骄傲拥有者,可以下载该模板的副本以用于您的下一个项目,或者仅仅为了学习源代码,掌握一两个新技巧。


重新设计数百个组件以适应 Tailwind UI

设计变化迅速,自从我们首次发布 Tailwind UI 已经过去了三年多,我们觉得它值得被重新审视,以确保它仍然是我们最好的作品。

我们惊喜地发现,过去三年里我们的设计水平确实有所提高,因此我们花了四个月的时间,全心投入地将每个组件和类别打磨得尽可能完美。

Tailwind UI 重新设计的页面示例和组件的拼贴

当我们走出洞穴再度见到阳光时,我们拥有数百个重新设计的组件,数十个全新的点子,以及一批新页面示例来展示它们。

以下是我们所做的一些改进类型的概述。

重新设计过时的现有模式

Tailwind UI 中的许多组件模式都是非常经典的理念,但随着设计趋势的变化以及我们成为更好的设计师,这些模式的具体实现可能会开始感觉像是来自另一个时代。

Tailwind UI 中旧组件与其新设计版本的比较

我们逐一查看所有组件,发现许多我们想要再次尝试的模式,并尽力将它们带入2023年。

查看 Hero Sections 类别的一些不错示例,看看这些更新的模式是什么样的。

细化全局的细微细节

许多组件并不需要完全的重新设计,更多的是需要一点额外的打磨。

Tailwind UI 中旧组件与其新细化版本的比较

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

上述示例来自 描述列表 类别——如果您想查看其完整的浏览器渲染效果,请去那儿看看。

设计大量全新示例

在我们查看所有现有组件的过程中,我们不断产生新的点子,这些点子在原始模式集中似乎缺失。

Tailwind UI 中新组件示例的拼贴

因此,我们设计了大量全新的组件,尽量填补我们看到的许多空白。

许多类别的数量翻了一番,例如 特色部分 类别,里面充满了许多精彩的新点子。

添加更多暗色变体

我感觉现如今几乎所有新的网站默认都是黑暗主题,因此我们觉得有责任为您提供一些为深色背景优化的示例。

Tailwind UI 中的新暗色组件示例的拼贴

我特别喜欢的一个示例是这些新的 暗色徽章——它们其实没有太多内容,但背景色上的那一点透明度为暗色设计带来了非常不错的效果。

全新的页面示例

最后,我们将所有这些新内容整理成一系列全新的页面示例来展示它们,其中包括所有人一直在向我们询问的应用程序 UI 示例,源自我们一些市场组件的屏幕截图。

Tailwind UI 中新页面示例的拼贴

查看更新后的 主页示例 类别以查看一些新设计。


所以,毫无疑问,这是我们历史上最大的 Tailwind UI 更新。从一月份开始,我们慢慢地推出这些改进,所有内容都记录在 Tailwind UI 变更日志 中,如果您想了解更详细的变化,请查看。

接下来,我们将深入探索许多关于 Tailwind CSS v4.0 的构想,并探索我们的第一个 Next.js 应用程序启动工具包。期待在接下来的几周与您分享更多信息!

Get all of our updates directly to your inbox.
Sign up for our newsletter.