自从我们在十二月发布 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 年。
查看英雄区块类别,了解这些更新模式的一些很好的例子。
全面微调细节
许多组件并不真正需要完全重新设计,它们只需要一点额外的打磨。
我们检查了大量组件,对间距、排版和对比度进行了细微改进,结果感觉更加清晰和整洁。
上面的例子来自描述列表类别 — 如果你想在浏览器中看到它的完整渲染效果,请去那里查看。
设计大量全新示例
在检查所有现有组件时,我们不断想出新的想法,这些想法在原始模式集中似乎缺失。
所以我们设计了大量全新的组件,试图填补尽可能多我们注意到的空白。
许多类别的规模都增加了一倍以上,比如功能区块类别,里面装满了非常棒的新想法。
添加更多深色变体
现在我看到的几乎每个新网站默认都是深色的,所以我们觉得我们有道德义务给你一些为深色背景优化的更多示例。
我真正喜欢的一个例子是这些新的深色徽章 — 它们真的没什么特别的,但背景色上那一点点透明度对深色设计来说是一个非常好的效果。
全新的页面示例
最后,我们把所有这些新东西组合在一起,制作了一堆全新的页面示例来展示它们,包括每个人都一直在我们的营销组件的截图中催促我们做的应用程序 UI 示例。
查看更新后的主屏幕类别,例如查看其中一些新设计。
就是这样,毫无疑问这是我们有史以来最大的 Tailwind UI 更新。我们从一月份开始就在慢慢推出这些改进,它们都记录在 Tailwind UI 更新日志中,如果你想深入了解更改的详细信息,请查看。
接下来 — 我们将深入研究我们对 Tailwind CSS v4.0 的大量想法,并探索我们的第一个 Next.js 应用程序启动工具包。很高兴在未来几周分享更多内容!