
在我编程生涯的早期,我喜欢关注 thoughtbot。他们一直在撰写有趣的编程文章,制作精彩的截屏视频,并发布精彩的书籍。我能感觉到他们真的很用心,这给了我莫大的启发。
¥When I was early in my programming career, I loved following thoughtbot. They were always writing interesting programming articles, producing fantastic screencasts, and publishing incredible books. I could tell they really cared about their craft and it inspired the hell out of me.
但当他们推出 Upcase 时,最让我兴奋的并不是课程或每周的视频。最让我兴奋的是 Upcase 的源代码 - 订阅后即可访问的实际生产版 Rails 代码库。
¥But when they launched Upcase, the thing I was most excited about wasn't the courses or weekly videos. What I was most excited about was the source code for Upcase itself — the actual-in-production Rails codebase that they gave you access to when you subscribed.
我已经从博客文章、书籍和截屏视频中学到了很多,但我仍然渴望有机会深入研究由我信任的人编写的真实代码库,并研究他们如何将所有这些知识整合在一起,构建一个可用于生产环境的应用。
¥I'd learned a ton from blog posts, books, and screencasts, but I still craved the chance to dig into a real-world codebase crafted by people I trust and study how they put all that knowledge together to build a production-ready application.
那段经历对我来说是一次蜕变,所以很长一段时间以来,我一直想为大家提供类似的体验,让他们学习如何使用 Tailwind CSS 构建真实的网站。
¥That experience was transformative for me, and so for a long time I've wanted to give people something like it to learn how real websites are built with Tailwind CSS.
布局如何分解为组件,这些组件暴露了哪些类型的 API,配置是如何自定义的 - 所有这些有趣的决策,当你在浏览器中点击“查看源代码”时是看不到的。
¥How a layout is broken down into components, what sort of APIs those components expose, how the config has been customized — all of the interesting decisions that you can't see when you just click view source in the browser.
今天,我们发布了首批官方 Tailwind CSS website templates - 由 Tailwind CSS 和 Next.js 提供支持,将精美的设计融入到生产级质量的代码库中。
¥So today we're releasing our first batch of official Tailwind CSS website templates — beautiful designs engineered into production-quality codebases, powered by Tailwind CSS and Next.js.
我们从三月份就开始设计这些功能了,现在我很高兴能将这五个功能发布出来,方便大家查看和使用:
¥We started designing these way back in March and I'm really excited to get these first five out the door so you can check them out and start playing with them:
-
Syntax — 一个文档站点模板,由 Stripe 全新的 Markdoc 库提供支持,非常适合开源项目或产品文档等用途。
¥Syntax — a documentation site template powered by Stripe's new Markdoc library that's perfect for things like open-source projects or product documentation.
-
Primer — 一个电子书和课程的落地页模板,融合了我们在发布自有信息产品过程中积累的诸多最佳实践。
¥Primer — a landing page template for ebooks and courses that bakes in a lot of the best practices we've learned releasing our own info products.
-
Salient — 一个精美而简洁的 SaaS 营销网站,你可以快速将其应用于你的下一个想法,而无需浪费时间在实际产品上。
¥Salient — a stunning but simple SaaS marketing website you can quickly adapt for your next idea without burning time you wish you were spending on the actual product.
-
Keynote - 一个设计精美的会议网站,既适合小型本地聚会,也适合国际活动。
¥Keynote — a beautiful conference website design that works just as well for small local gatherings as it does for international events.
-
Transmit — 一个很棒的播客模板,带有自定义的持久音频播放器,你可以立即将其连接到你自己的 RSS 源。
¥Transmit — an awesome podcasting template with a custom persistent audio player that you can wire up to your own RSS feed in no time.
我们在设计和代码方面投入了大量的时间和精力,所有代码的结构都与实际生产项目中完全相同。如果你不想从零开始,它们是完美的起点,也是学习专家如何使用 Tailwind CSS 构建现代网站的最佳方式。
¥We've put a ton of time and attention into both the design and the code, and everything is structured exactly the way we'd do it in a real production project. They're the perfect starting point when you don't want to start from a blank canvas, and the best way to learn how experts build modern websites with Tailwind CSS.

每个模板都可以单独购买,价格为 99 美元,或者你可以使用 all-access 来获取所有模板 - 这是我们今天推出的全新套装,包含我们所有添加的永久内容。
¥Each template can be purchased on its own for $99, or you can get all of them with all-access — the new get-everything-we-ever-add-forever package we're launching today.
全力以赴,开放所有访问权限(Going all in on all-access)
¥Going all in on all-access
当我们开始开发模板时,我非常确定的一件事是,我希望所有模板都易于访问。
¥When we started working on templates, one of the things I was really sure about is that I wanted it to be easy to get access to all of them.
这对我来说很重要,原因有二:
¥This was important to me for two reasons:
-
我希望人们将我们的模板视为教育资源,而不是传统的网站主题。我们构建的每个模板都有其独特的学习时刻,我不希望人们不得不选择性地选择他们要学习的内容。
¥I want people to think of our templates more like educational resources than traditional website themes. Every template we build has its own unique learning moments, and I don't want people to have to be selective about what they get to learn from.
-
我不想担心每个模板的投资回报率 (ROI)。没有什么比确保每个模板都具有大众吸引力更能破坏设计和构建模板的乐趣了。我希望我们能够自由地制作小众、有趣的东西,并提出很酷的想法供大家学习,而不仅仅是那些能够卖出足够多销量来证明我们投入工作的模板。
¥I don't want to worry about ROI on a per-template basis. Nothing would suck the fun out of designing and building templates like having to make sure each one had mass appeal. I want us to have the freedom to make niche, interesting stuff with cool ideas to study, not just templates that can sell enough copies on their own to justify the work we put into them.
我小时候去过法国的 music festival,那里有近百支乐队演出。演出名单上有几个乐队我非常喜欢,每首歌我都熟记于心,我愿意在任何一天买票去听。
¥When I was a kid I went to this music festival in France where almost a hundred bands performed. There were a couple of bands on the bill I absolutely loved, knew every song, and would buy a ticket to see any day of the week.
虽然他们中的大多数都是我非常喜欢的乐队,但我不会开车 90 分钟去看演出。但把所有这些放在一起让我买了一张去巴黎的机票,并获得了人生中最美好的体验之一。
¥Most of them though were bands I really liked, but wouldn't have made the 90 minute drive to make it out to a show. But putting all of them on a bill together got me to buy a plane ticket to Paris, and have one of the best experiences of my life.
我希望 Tailwind UI 感觉就像一个音乐节,你可以从一个舞台漫步到另一个舞台,欣赏一两首你从未听说过的乐队的歌曲,偶尔还会被一场你原本可能永远不会去观看的表演所震撼。
¥I want Tailwind UI to feel like a music festival, where you can wander from stage to stage, enjoy a song or two from a band you've never heard of, and once in a while be blown away by a performance you would have never otherwise bothered to check out.
因此,我们将为 Tailwind UI 推出一个全新的 all-access package,其中包含对现有所有模板和组件包以及我们将来添加的任何新内容的访问权限。
¥So we're launching a new all-access package for Tailwind UI that includes access to every template and component package that exists today and any new content we add in the future.

只需一次性购买,价格为 299 美元。无需订阅,无需升级费用 - 如果我们为 Tailwind UI 添加新功能,它将永远属于你。
¥It's a one-time purchase of $299. No subscription, no upgrade costs — if we add something new to Tailwind UI, it's yours, forever.
如果你已经拥有 Tailwind UI 的所有内容,我们已免费为你升级到全功能访问。
¥And if you already own everything in Tailwind UI, we've upgraded you to all-access for free.
好了,这就是我们过去几个月一直在努力完成的所有内容!
¥So there you have it — that's everything we've been working on for the last few months!
我们已经在开发一系列新模板,并且正在积极地从这些模板中提取许多组件创意,将其转化为新的示例,以纳入市场营销、应用 UI 和电子商务组件类别。
¥We've got a bunch of new templates in the works already, and we're actively working on extracting a lot of the component ideas from these templates into new examples to include in the Marketing, Application UI, and Ecommerce component categories.
这是我在使用这些网站模板时最喜欢的事情之一 - 使用 Tailwind 构建现实世界的东西是我们提出新组件想法的最佳方式,也是找到改进 Tailwind CSS 和 Headless UI 的方法的最佳方式。
¥That's one of my favorite things about working on these site templates — building real-world stuff with Tailwind is the best way for us to come up with new component ideas, and to find ways to improve both Tailwind CSS and Headless UI too.
期待未来几个月 Tailwind UI 的众多新特性!
¥Look forward to lots of new Tailwind UI stuff in the coming months!