我自从去年十二月发布了 Protocol 模板 之后就没有分享过 Tailwind UI 更新,但这并不是因为我们没有忙碌。
在过去的四个月里,我们在 Tailwind UI 上的工作可能多于以往,而我们终于完成了初衷,非常期待向您展示这一切!
Commit:为您的下一个想法设计的美丽变更日志模板
就在几天前,我们发布了 Commit,这是我们为 Tailwind UI 设计的全新变更日志模板——当然是使用 Tailwind CSS 和 Next.js 构建的。
公共变更日志已成为一种非常流行的方式,帮助人们了解您正在进行的工作,并保持责任感、提升出货能力。当然,它们并不是一个新的概念,但我认为直到 Linear 开始在他们的变更日志网站上发布,其他人才开始对使用它们作为公司博客的替代品感到兴奋。
Commit 是我们对现代产品变更日志的看法,设计成一个单页面网站,可以作为您的项目主页和您所做一切工作的展示。

像我们所有的模板一样,它充满了功能和细节,令人赏心悦目、令人愉快:
- 支持明暗模式,因为您不能制作开发者可能会阅读的内容,而不针对凌晨2点灭灯情况下的阅读进行优化。
- 手工制作的排版风格,经过精心挑选的字体大小、间距、列表样式等,专门为此模板设计。
- 内置语法高亮,由 Shiki 提供支持,并可通过几个 CSS 变量轻松自定义。
- 单文件编辑体验,每个条目都位于一个单一的 MDX 文件中,因此更新您的变更日志就像在开源项目中更新
CHANGELOG.md
文件一样轻便。 - 美丽的动画和效果,此次由 Motion One 提供支持,是研究如何使用这一尖端新库实现这些技巧的绝佳资源。
一如既往,跳入代码并使其成为自己的也很简单——在这里我们仅调整了一些颜色,它感觉就像是一个完全不同的网站:

查看 实时演示 以获得完整体验,如果您已经是 Tailwind UI 全访问 许可证的骄傲拥有者,可以下载该模板的副本以用于您的下一个项目,或者仅仅为了学习源代码,掌握一两个新技巧。
重新设计数百个组件以适应 Tailwind UI
设计变化迅速,自从我们首次发布 Tailwind UI 已经过去了三年多,我们觉得它值得被重新审视,以确保它仍然是我们最好的作品。
我们惊喜地发现,过去三年里我们的设计水平确实有所提高,因此我们花了四个月的时间,全心投入地将每个组件和类别打磨得尽可能完美。

当我们走出洞穴再度见到阳光时,我们拥有数百个重新设计的组件,数十个全新的点子,以及一批新页面示例来展示它们。
以下是我们所做的一些改进类型的概述。
重新设计过时的现有模式
Tailwind UI 中的许多组件模式都是非常经典的理念,但随着设计趋势的变化以及我们成为更好的设计师,这些模式的具体实现可能会开始感觉像是来自另一个时代。

我们逐一查看所有组件,发现许多我们想要再次尝试的模式,并尽力将它们带入2023年。
查看 Hero Sections 类别的一些不错示例,看看这些更新的模式是什么样的。
细化全局的细微细节
许多组件并不需要完全的重新设计,更多的是需要一点额外的打磨。

我们查看了大量组件,进行细微的改善,包括间距、排版和对比度,结果令人感觉更加清晰和干净。
上述示例来自 描述列表 类别——如果您想查看其完整的浏览器渲染效果,请去那儿看看。
设计大量全新示例
在我们查看所有现有组件的过程中,我们不断产生新的点子,这些点子在原始模式集中似乎缺失。

因此,我们设计了大量全新的组件,尽量填补我们看到的许多空白。
许多类别的数量翻了一番,例如 特色部分 类别,里面充满了许多精彩的新点子。
添加更多暗色变体
我感觉现如今几乎所有新的网站默认都是黑暗主题,因此我们觉得有责任为您提供一些为深色背景优化的示例。

我特别喜欢的一个示例是这些新的 暗色徽章——它们其实没有太多内容,但背景色上的那一点透明度为暗色设计带来了非常不错的效果。
全新的页面示例
最后,我们将所有这些新内容整理成一系列全新的页面示例来展示它们,其中包括所有人一直在向我们询问的应用程序 UI 示例,源自我们一些市场组件的屏幕截图。

查看更新后的 主页示例 类别以查看一些新设计。
所以,毫无疑问,这是我们历史上最大的 Tailwind UI 更新。从一月份开始,我们慢慢地推出这些改进,所有内容都记录在 Tailwind UI 变更日志 中,如果您想了解更详细的变化,请查看。
接下来,我们将深入探索许多关于 Tailwind CSS v4.0 的构想,并探索我们的第一个 Next.js 应用程序启动工具包。期待在接下来的几周与您分享更多信息!