全新更新日志模板 + 史上最重大的 Tailwind UI 更新

自从我们 12 月发布 协议模板 以来，我还没有分享过 Tailwind UI 更新，但这并不是因为我们不忙。

¥I haven't shared a Tailwind UI update since we released the Protocol template in December, but that's not because we haven't been busy.

在过去的四个月里，我们在 Tailwind UI 上投入的工作可能比以往任何时候都多，现在我们终于完成了既定目标，我很高兴能把这一切都渲染给大家！

¥Over the last four months we've probably done more work on Tailwind UI than we ever have, and having finally wrapped up what we set out to achieve I'm excited to lay it all out for you!

提交：一个漂亮的更新日志模板，助你打造下一个创意(Commit: A beautiful changelog template for your next idea)

¥Commit: A beautiful changelog template for your next idea

就在几天前，我们发布了 提交，这是一个专为 Tailwind UI 设计的全新更新日志模板 - 当然，它是使用 Tailwind CSS 和 Next.js 构建的。

¥Just a few days ago we released Commit, a brand new changelog template we designed for Tailwind UI — built of course with Tailwind CSS and Next.js.

公开更新日志已经成为一种非常流行的方式，可以让人们了解你的工作进展，并保持责任感，并提升你的交付能力。当然，它们绝不是什么新概念，但我认为直到 线性 开始在其更新日志网站上发布内容时，其他人才开始兴奋地将它们用作公司博客的替代品。

¥Public changelogs have become a really popular way to keep people in the loop about what you've been working on, and to stay accountable and build your shipping muscles. They aren't a new concept by any means of course, but I don't think it was until Linear started publishing to their changelog site that others got excited about using them almost as an alternative to a company blog.

Commit 是我们对现代产品更新日志的诠释，它被设计为一个单页网站，既可以作为你的项目主页，也可以作为你所有工作内容的提要。

¥Commit is our take on the modern product changelog, designed as a single page website that can act as both your project homepage and a feed of everything you've been working on.

与我们所有的模板一样，它拥有丰富的功能和细节，让你体验愉悦，使用起来也乐在其中：

¥Like all of our templates, it's loaded with features and details that make it a delight to experience and a pleasure to work on:

• 支持明夜间模式，因为如果不针对凌晨 2 点关灯阅读进行优化，开发者就无法阅读任何内容。

  ¥Light and dark mode support, because you can't make anything a developer might read without optimizing it for reading at 2am with the lights off.

• 专为此模板设计的手工排版样式、精心选择的字体大小、间距、列表样式等。

  ¥Hand-crafted typography styles, meticulously chosen font sizes, spacing, list styles, and more, designed specifically for this template.

• 内置语法高亮，由 Shiki 提供支持，并且可以通过一些 CSS 变量轻松自定义。

  ¥Built-in syntax highlighting, powered by Shiki, and easy to customize with a few CSS variables.

• 单文件编辑体验，每个条目都包含在一个 MDX 文件中，因此更新变更日志就像在开源项目中更新 CHANGELOG.md 文件一样轻松。

  ¥Single-file editing experience, every entry lives in a single MDX file, so updating your changelog feels as lightweight as updating a CHANGELOG.md file in an open-source project.

• 精美的动画和特效，这次由 Motion One 提供支持，使其成为学习如何使用提示新库实现此类技巧的绝佳资源。

  ¥Beautiful animations and effects, this time powered by Motion One, making it a great resource for studying how to pull off these sorts of tricks with a cutting-edge new library.

一如既往，你可以轻松进入代码并自行修改 - 我们只调整了一些颜色，就让网站焕然一新：

¥As always it's easy to jump into the code and make it your own — here we've just tweaked a handful of colors and it feels like a totally different website:

查看 现场演示 以获得完整体验，如果你已经拥有 Tailwind UI 全面访问 许可证，请下载模板副本以在下一个项目中使用，或者仅研究源代码以学习一两个新技巧。

¥Check out the live demo for the full experience, and if you're already the proud owner of a Tailwind UI all-access license, download a copy of the template to use it in your next project or just to study the source code to learn a new trick or two.

为 Tailwind UI 重新设计数百个组件(Redesigning hundreds of components for Tailwind UI)

¥Redesigning hundreds of components for Tailwind UI

设计发展日新月异，距离我们首次发布 Tailwind UI 已有三年多，我们觉得值得对其进行仔细的审视，确保它仍然是我们最好的作品。

¥Design moves fast and with it being over three years since we first released Tailwind UI, we felt like it deserved to be put under the microscope and make sure it still felt like our best work.

我们惊喜地发现，是的，在过去三年里，我们的设计水平确实提高了，所以我们花了四个月的时间，用我们新获得的能力，尽可能地将每个组件和类别都做到像素级完美。

¥We were pleasantly surprised to discover that yes, we have actually gotten better at design over the past three years, so we spent four months heads down making every component and category as pixel-perfect as we possibly could with our newfound powers.

当我们走出洞穴，重见阳光时，我们已经拥有了数百个重新设计的组件、数十个全新的想法，以及一批全新的页面示例来展示它们。

¥Once we came out of our cave to see the sunlight again we had hundreds of redesigned components, dozens of totally new ideas put together, and a fresh batch of page examples to show them all off.

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

¥Here's a run down of some of the types of improvements we made.

重新设计感觉过时的现有模式(Redesigning existing patterns that felt dated)

¥Redesigning existing patterns that felt dated

Tailwind UI 中的许多组件模式都是永恒的理念，但随着设计趋势的变化和我们成为更优秀的设计师，这些模式的具体实现可能会开始感觉像是来自另一个时代。

¥A lot of the component patterns in Tailwind UI are really timeless ideas, but as design trends change and we become better designers, the specific implementations of those patterns can start to feel like it's from another era.

我们逐一检查了所有组件，发现其中有很多模式值得我们再次尝试，并竭尽全力将它们带入 2023 年。

¥We went through all of the components one-by-one and found lots of patterns we wanted to take another stab at and did our best to bring them into 2023.

请查看 Hero 部分 类别，了解这些全新图案的一些精彩示例。

¥Take a look at the Hero Sections category for some great examples of what these refreshed patterns look like.

全面微调细微细节(Fine-tuning subtle details across the board)

¥Fine-tuning subtle details across the board

很多组件其实并不需要彻底重新设计，只需要稍微打磨一下就行了。

¥A lot of components didn't really need a full on redesign as much as they needed just a little bit of extra polishing.

我们仔细检查了大量组件，并对间距、排版和对比度进行了细微的改进，最终的效果感觉更加清晰锐利。

¥We went through tons of components making subtle improvements to the spacing, typography, and contrast, and the results just feel so much sharper and cleaner.

上面的示例来自 描述列表 类别 - 如果你想查看其完整的浏览器渲染效果，请查看那里。

¥The example above is from the Description Lists category — check it out there if you want to see it in its full browser-rendered glory.

设计大量全新示例(Designing a ton of brand new examples)

¥Designing a ton of brand new examples

在审查所有现有组件的过程中，我们不断涌现出一些新想法，这些想法似乎在原始模式中缺失。

¥As we were going through all of the existing components, we kept coming up with new ideas that felt like they were missing from the original set of patterns.

因此，我们设计了大量全新的组件，试图填补尽可能多的突出的漏洞。

¥So we designed tons of brand new components, trying to fill as many holes that stood out to us as we could.

很多类别的规模都扩大了一倍多，比如 功能部分 类别，里面充满了真正精彩的新想法。

¥Lots of categories more than doubled in size, like the Feature Sections category which is loaded with really killer new ideas.

添加更多深色变体(Adding more dark variations)

¥Adding more dark variations

感觉最近我看到的几乎每个新网站默认都是深色的，所以我们觉得我们有道义上的责任给你提供更多针对深色背景优化的示例。

¥It feels like almost every new website I see these days is dark by default, so it felt like we had a moral obligation to give you some more examples optimized for dark backgrounds.

我非常喜欢的一个例子是这些新的 深色徽章 - 它们其实没什么特别的，但背景颜色上的一点点不透明度对于深色设计来说，效果非常好。

¥One of examples I really like are these new dark badges — there's not much to them really but that little bit of opacity on the background color is such a nice effect for dark designs.

全新页面示例(All-new page examples)

¥All-new page examples

最后，我们将所有这些新内容整理成一系列全新的页面示例来展示，其中包括大家一直从我们一些营销组件的屏幕截图中向我们索要的应用 UI 示例。

¥Finally we took all of this new stuff and put together a bunch of brand new page examples to show them off, including the application UI example everyone has been bugging us for from the screenshots in some of our marketing components.

例如，查看更新后的 主屏幕 类别以了解其中一些新设计。

¥Check out the updated Home Screens category for example to see some of these new designs.

好了，毫无疑问，这是我们有史以来最大的 Tailwind UI 更新。自一月份以来，我们一直在逐步完善这些改进，这些改进都体现在 Tailwind UI 更新日志 中，如果你想深入了解更详细的改进内容，请查看 Tailwind UI 更新日志。

¥So there you go, without a doubt our biggest Tailwind UI update of all time. We've been dripping out these improvements slowly since January and it's all captured in the Tailwind UI changelog so check that out if you want to dig in to what's changed in more detail.

接下来我们要做的 - 深入研究我们对 Tailwind CSS v4.0 的大量想法，并探索我们的第一个 Next.js 应用入门套件。很高兴在接下来的几周分享更多！

¥Next up for us — digging in to a ton of ideas we have for Tailwind CSS v4.0, and exploring our first Next.js application starter kit. Excited to share more in the coming weeks!