上个月，超过 200 人聚集在我的家乡安大略省剑桥市，大家聚在一起，交流经验，并一窥我们正在开发的一些新东西。
¥Last month, over 200 people got together in my hometown of Cambridge, Ontario to hang out, talk shop, and get a peek behind the curtain at some of the new stuff we've been working on.
Tailwind Connect 最初的想法是趁团队在城里的时候举办一次小型本地聚会，但后来发展到我们不得不租用一个大礼堂，聘请四名摄像师，并支付了巨额的餐饮费用，这笔费用甚至比我自己的婚礼还要高。
¥Tailwind Connect started out as an idea for throwing a little local meetup while the team was in town, but naturally ballooned into us renting a massive hall, hiring a crew of four videographers, and racking up a catering bill that put my own wedding to shame.
尽管我们在制作上有些沉迷，但我们确实努力让它感觉更像是一次聚会，而不是一场正式的会议。我们将活动安排在晚上，并只进行了一次演示，尽可能多地留出时间供大家聚在一起，吃着披萨喝着啤酒交流。
¥But even though we got a little carried away with the production, we really tried to make it feel more like a meetup than a full-blown conference. We ran the event in the evening and kept it to just one presentation, leaving as much time as possible for people to just hang out and connect over pizza and beer.
我们原本预计这将是一场 "下班后开车去那里" 本地化活动，但几乎一半的参会者是乘飞机来的。为了帮助每个人充分利用活动时间，我们为活动搭建了一个 Discord 服务器，以便前来参加活动的人们可以互相制定计划，并在下午租用了活动场地隔壁的 Foundry Tavern 露台，让人们有理由早点见面并结识一些新朋友。
¥We originally expected it to be a "drive there after work" local-heavy event, but almost half of the people who attended traveled by plane to get here. So to help everyone make the most of their time here, we set up a Discord server for the event so people traveling in could make plans with each other, and rented out the patio at the Foundry Tavern next door to the event space for the afternoon to give people a reason to meet up early and make some new friends.
我们在下午 5:30 左右开启了活动，并以一个小时的开幕招待会拉开序幕，大家可以聚在一起聊天，享用一些小吃。
¥We opened up the doors for the event around 5:30pm and started the night with an hour long opening reception, where people could hang out and talk and enjoy some canapés.
我认为我们真正做到了的一个细节是徽章 - 当你购买门票时，我们会为你提供一个基本的 Markdown 字段，你可以在其中写下任何你想写的关于你自己的信息，这可能会帮助人们与你展开有趣的对话。
¥One detail I thought we really nailed was the badges — when you bought a ticket we gave you a basic markdown field where you could write anything you wanted about yourself that might help people start interesting conversations with you.
我发现自己整晚都在盯着每个人的徽章，这真是一个很棒的方法，可以立即打破僵局，找到一些可以聊的东西。
¥I found myself looking at everyone's badges all night and it was an awesome way to immediately break the ice and have something to talk about.
大约下午 6:30，大家齐聚一堂，共同见证 主题演讲 的诞生。我首先介绍了 Tailwind CSS 项目的一些历史，以及它是如何发展到今天的。
¥At around 6:30pm everyone took a seat for the keynote presentation. I kicked it off with a bit of history on Tailwind CSS as a project, and how it got to where it is today.
六年前，我只需要在各个项目之间复制粘贴几个样式表即可。今天它已下载完毕每月有数百万开发者使用 2500 万次，一些全球最大的公司也使用它来构建一些全球最大的网站。终于有机会与社区的这么多人一起庆祝我们取得的进步，这对我来说真的很特别。
¥Six years ago it was just a couple of stylesheets I was copying and pasting from project to project. Today it's downloaded over 25 million times per month by millions of developers, and is used by some of the world's biggest companies to build some of the world's biggest websites. It was really special to me to finally get a chance to celebrate how far we've come in person with so many people from the community.
之后，Sam Selikoff 介绍了 一些精彩的演示，展示了一些最酷的 CSS 新功能。他演示了诸如强调色、流畅排版、标题平衡、容器查询，甚至砌体网格等功能，所有这些都使用了 Tailwind CSS 和实用优先的工作流程。
¥After that, Sam Selikoff walked through some brilliant demos showing off some of the coolest new features in CSS. He demoed things like accent color, fluid typography, headline balancing, container queries, and even masonry grid, all using Tailwind CSS and the utility-first workflow.
Sam 是一位很棒的朋友，我邀请他来参加这次活动并参与主题演讲，当时我甚至还没有具体计划要让他做什么，但他到达后大约 36 小时内就完成了整个演示，而且做得非常出色。无需幻灯片，全程实时编码，像专业人士一样轻松搞定。强烈推荐他的 YouTube 通道 和培训网站 构建 UI - 他是一位非常棒的老师。
¥Sam is an awesome friend, I asked him to come up for the event and be a part of the keynote without really even having a plan for what I was going to ask him to do at all, and he put together his whole presentation in about 36 hours after he arrived and absolutely nailed it. No slides, all live-coding, and crushed it like a pro. Highly recommend his YouTube channel and training site Build UI — dude is a fantastic teacher.
接下来，我提供了一个 Oxide 一窥，这是 Tailwind CSS 引擎的下一代版本。
¥Next, I gave a sneak peek at Oxide, the next evolution of the Tailwind CSS engine.
Oxide 包含很多不同的部分，但它们都归结为两个目标 - 提升性能和简化开发者体验。
¥Oxide is a lot of different pieces but they all boil down to two goals — improved performance, and simplifying the developer experience.
通过集成 Lightning CSS，我们将使 Tailwind 成为一款集多种 CSS 处理功能于一身的工具。这意味着在 Tailwind 的下一个版本中，诸如导入其他 CSS 文件、嵌套、供应商前缀以及未来 CSS 功能的语法转换等功能都将正常运行，无需安装或配置任何额外的工具，例如 autoprefixer 或 postcss-import。
¥We're making Tailwind more of an all-in-one CSS processing tool by integrating Lightning CSS, which means that in the next version of Tailwind, things like importing other CSS files, nesting, vendor prefixes, and syntax transforms for future CSS features will just work — no need to install or configure any additional tooling like autoprefixer or postcss-import.
Lightning CSS 采用 Rust 编写，速度极快，我们也通过重写一些最关键的路径（例如扫描所有模板文件中的类名）尝试了 Rust。
¥Lightning CSS is written in Rust which makes it extremely fast, and we're dipping our toes into Rust ourselves too by rewriting some of most critical paths, like scanning all of your template files for class names.
通过这些改进，我们看到实际项目中的构建时间缩短了 50% 以上，即使是我们最大的项目，生产构建时间也缩短到了 150 毫秒左右。
¥With these improvements, we're seeing build times drop by over 50% in real-world projects, bringing the production build time down to around 150ms for even our largest projects.
Oxide 还将带来简化的配置体验。我们正在添加自动内容检测功能，这样你就无需再配置所有模板文件的路径，并且通过在 CSS 文件顶部用一个简单的 @import "tailwindcss" 调用替换所有 @tailwind 指令，可以更轻松地将 Tailwind 添加到你自己的 CSS 中。
¥Oxide is also going to bring a simplified configuration experience. We're adding automatic content detection so you won't need to configure the paths to all of your template files anymore, and making it even easier to add Tailwind to your own CSS by replacing the need for all of the @tailwind directives with a simple @import "tailwindcss" call at the top of your CSS file.
我还分享了一个我们正在探索的早期想法，即直接在 CSS 文件中而不是 JavaScript 中配置 Tailwind CSS。借助基于 CSS 的配置、自动内容检测和简化的导入流程，将来使用自定义颜色和字体配置 Tailwind 可能会变得如此简单：
¥I also shared a very early look at an idea we're exploring for configuring Tailwind CSS right in your CSS file instead of in JavaScript. With CSS-based configuration, automatic content detection, and the simplified import story, configuring Tailwind with some custom colors and fonts might look as simple as this in the future:
@import "tailwindcss";@import "./fonts" layer(base);:theme { --colors-neon-pink: oklch(71.7% 0.25 360); --colors-neon-lime: oklch(91.5% 0.258 129); --colors-neon-cyan: oklch(91.3% 0.139 195.8); --font-family-sans: "Inter", sans-serif; --font-family-display: "Satoshi", sans-serif;}我们计划在不进行任何重大更改的情况下引入所有这些功能，其中许多改进（包括 Lightning CSS 集成和我们基于 Rust 的模板解析器）将在未来几个月内于 Tailwind CSS v3.4 中推出。
¥We're planning to introduce all of this stuff without any breaking changes, and many of these improvements (including Lightning CSS integration and our Rust-based template parser) will be available in Tailwind CSS v3.4 in the next couple of months.
我肯定会在接近发布时更详细地写这些内容，但如果你想在那之前仔细了解，可以看看 观看主题演讲。
¥I'll definitely write about this stuff in a lot more detail closer to release time, but watch the keynote if you want to take a closer look before then.
我们以 Catalyst 预览 结束了主题演讲，这是我们自去年年底以来一直在开发的全新 React UI 套件。
¥We closed out the keynote with a preview of Catalyst, the new React UI kit we've been working on since late last year.
到目前为止，此功能已经在我们的路线图上酝酿了两年，经过数月的摸索，最终找到了最佳方案，我们终于在去年 10 月破土动工。
¥This is something that's been on our roadmap for two years at this point, and after many months of ironing out the best approach, we finally broke ground on it last October.
Catalyst 是一个功能齐全的组件系统，拥有精心设计的 API，包含构建你自己的应用所需的所有基本构建块。它包含按钮、表单控件、对话框、滑出、表格、下拉菜单等。
¥Catalyst is a batteries-included component system with thoughtfully designed APIs, and includes all of the basic building blocks you need to build your own applications. It includes things like buttons, form controls, dialogs, slide-overs, tables, dropdowns, and more.
Catalyst 与我们现有的应用 UI 组件示例之间最大的区别在于，Catalyst 中的组件都像在真实项目中一样连接在一起，而不是孤立的复制粘贴代码片段。
¥The biggest difference between Catalyst and our existing application UI component examples is that the components in Catalyst are all wired together like they'd be in a real project, instead of being isolated copy and paste code snippets.
但就像我们的 网站模板 一样，Catalyst 中的代码是你的。如果你想调整某些内容，只需打开文件并进行调整即可 - 它不是你通过 npm 安装的库。
¥But just like with our site templates, the code in Catalyst is yours. If you want to tweak something, you just open up the file and tweak it — it's not a library you install via npm.
把它想象成你自己的组件系统的起点。你可以从我们这里下载最新版本，将 /components 目录的内容复制到你的项目中，然后开始构建。
¥Think of it like a starting point for your own component system. You download the latest version from us, copy the contents of the /components directory into your project, then start building.
如果你需要更改某些内容，请更改它。
¥If you need to change something, change it.
如果你想创建自己的新组件，请创建它们。
¥When you want to create your own new components, create them.
整个想法是，6 个月后，代码库感觉就像是你的，你几乎会忘记你最初是用 Catalyst 启动它的。
¥The whole idea is that 6 months down the road the codebase feels so yours that you'll almost forget you kickstarted it with Catalyst in the first place.
在介绍了项目并向大家简单介绍了一下之后，我把工作交给了 Steve Schoger，他出色地完成了 所有小的设计细节 的讲解，使 Catalyst 感觉像是一个如此精致的设计系统。
¥After introducing the project and giving everyone a bit of a tour, I handed things off to Steve Schoger who did an amazing job walking through all of the little design details that went into making Catalyst feel like such a polished design system.
最后，我展示了一些我们用来实现一些设计细节的高级 Tailwind CSS 技巧，比如如何使用 CSS 变量和 Tailwind 的任意属性功能，通过 Framer Motion 实现响应式过渡。
¥I wrapped things up by showing off a couple of advanced Tailwind CSS tricks we had to use to implement some of those design details, like how to implement responsive transitions with Framer Motion using CSS variables and Tailwind's arbitrary property feature.
Catalyst 仍在开发中，所以请不要指望我，但如果运气好的话，我们会在下个月左右推出早期版本并分享更多细节，与 Tailwind UI 客户分享。
¥Catalyst is still a work-in-progress so don't hold me to it, but with any luck we'll have an early version and more details to share with Tailwind UI customers in the next month or so.
接下来的三个小时，我们在活动场地闲逛，享用茶点，并与所有前来参加活动的嘉宾见面。
¥For the next three hours we got to hang out in the event space enjoying some refreshments, and getting to meet all of the people who made the trip to attend.
我在主题演讲中提到过，但这是项目历史上第一次将这么多 Tailwind 的粉丝聚集到同一个房间，对我来说，终于见到了这么多从使用这个框架中获益良多的人，这真是一次非常特别的经历。当所有东西都仅仅存在于 GitHub 和 Twitter 上时，我们很容易低估我们在这里所做工作的影响力，而看到它在实体空间中与真人互动，我感到非常自豪。
¥I mentioned it in the keynote, but this was the first time in the history of the project that we'd ever gotten a bunch of Tailwind fans into the same room, and it was a really special experience for me to finally meet so many people who have gotten so much out of using the framework. It's easy to sort of underappreciate the impact of the work we do here when everything is just on GitHub and Twitter, and to see it manifested in physical space with real people just left me beaming with pride.
能够参与这些项目并帮助这么多人在 Web 开发中获得更多乐趣，我感到非常荣幸。期待未来再举办一次这样的活动 - 这绝对是我人生中的一大亮点。
¥It's really an honor to work on these projects and be able to help so many people have more fun building things for the web. Looking forward to doing another event like this in the future — a major life highlight for me for sure.
查看 Tailwind Connect 2023 照片库 了解更多活动照片，如果你无法亲自到场，请查看 在 YouTube 上观看主题演讲。
¥Check out the Tailwind Connect 2023 photo gallery for more photos of the event, and watch the keynote on YouTube if you couldn't make it in person.