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

日期

自从我们在 12 月发布了 Protocol 模板 以来,我还没有分享过 Tailwind UI 更新,但这并不意味着我们没有在忙碌。

在过去的四个月里,我们在 Tailwind UI 上投入的工作可能比以往任何时候都多,现在我们终于完成了既定的目标,我很高兴与大家分享!


提交:一个漂亮的变更日志模板,适合你的下一个想法

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

Learn about 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 年。

看看 英雄区 类别,了解这些更新后的模式的外观。

全面微调细微细节

许多组件并不真正需要完全重新设计,而只需要一些额外的抛光。

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 更新。我们从 1 月份就开始慢慢地发布这些改进,所有这些改进都记录在Tailwind UI 变更日志中,所以如果你想更详细地了解发生了哪些变化,可以查看一下。

接下来,我们将深入研究我们对 Tailwind CSS v4.0 的许多想法,并探索我们的第一个 Next.js 应用程序入门套件。期待在接下来的几周内分享更多内容!