Tailwind Connect 2023：我们首个线下活动的回顾
- 日期
Adam Wathan
上个月，超过 200 人聚集在我的家乡加拿大安大略省剑桥，一起聚会、交流，并一睹我们正在开发的一些新功能的风采。
Tailwind Connect 最初的想法是，在团队来到这里的时候举办一个小型当地聚会，但自然而然地发展成了租用一个大型大厅，雇佣四名摄像师，以及支付了一笔让我自己的婚礼都相形见绌的餐饮费用。
尽管我们在制作方面有点过头，但我们确实努力让它感觉更像是一个聚会，而不是一个完整的会议。我们在晚上举办活动，只进行一次演讲，留出尽可能多的时间让大家聚在一起，在披萨和啤酒中交流。
我们最初预计这将是一个“下班后开车前往”的以当地人为主的活动，但参加活动的人中几乎有一半是乘飞机来的。因此，为了帮助大家充分利用在這裡的時間，我們為活動建立了一個 Discord 服務器，以便旅行的人可以互相約會，並在活動場地隔壁的 Foundry Tavern 租用了露台，以便大家可以在下午早些時候聚會，结交新朋友。
我们在下午 5:30 左右开放了活动大门，并以一个小时的开幕酒会开始当晚的活动，人们可以聚在一起聊天，享受一些小吃。
我认为我们真正做得很好的一个细节是徽章——当你购买门票时，我们会给你一个基本的 Markdown 字段，你可以在其中写下任何你想写的东西，这些东西可能有助于人们与你进行有趣的对话。
我发现自己整晚都在看每个人的徽章，这真是一个打破僵局、找话题聊天的绝佳方式。
大约下午 6:30，每个人都坐下来参加了主题演讲。我从 Tailwind CSS 作为项目的简史开始，以及它是如何发展到今天的。
六年前，它只是一些我从一个项目复制粘贴到另一个项目的样式表。如今，它每月被数百万开发人员下载超过 2500 万次，并被世界上一些最大的公司用来构建世界上一些最大的网站。对我来说，终于有机会与社区中的这么多人一起庆祝我们取得的进步，这真是太特别了。
之后，Sam Selikoff 演示了一些精彩的演示，展示了 CSS 中一些最酷的新功能。他演示了诸如强调色、流畅排版、标题平衡、容器查询，甚至砌体网格等功能，所有这些都使用 Tailwind CSS 和实用优先的工作流程。
Sam 是一位很棒的朋友，我请他来参加活动并成为主题演讲的一部分，当时我甚至没有计划要让他做什么，他到达后大约 36 小时就完成了整个演示，并且做得非常出色。没有幻灯片，全是现场编码，并且像专业人士一样完成了它。强烈推荐他的YouTube 频道 和培训网站Build UI - 这家伙是一位很棒的老师。
接下来，我介绍了Oxide 的抢先体验，这是 Tailwind CSS 引擎的下一个演变。
Oxide 包含许多不同的部分，但它们都归结为两个目标 - 提高性能，简化开发人员体验。
我们通过集成Lightning CSS，使 Tailwind 成为一个更全面的 CSS 处理工具，这意味着在 Tailwind 的下一个版本中，诸如导入其他 CSS 文件、嵌套、供应商前缀和未来 CSS 功能的语法转换等功能将正常工作 - 无需安装或配置任何其他工具，例如autoprefixer 或 postcss-import。
Lightning CSS 是用 Rust 编写的，这使得它非常快，我们也正在尝试使用 Rust，通过重写一些最关键的路径，例如扫描所有模板文件以查找类名。
通过这些改进，我们在实际项目中看到构建时间下降了 50% 以上，即使对于我们最大的项目，生产构建时间也降至约 150 毫秒。
Oxide 还将带来简化的配置体验。我们添加了自动内容检测，因此您不再需要配置所有模板文件的路径，并且通过用简单的 @import "tailwindcss" 调用替换所有 @tailwind 指令，使将 Tailwind 添加到您自己的 CSS 中变得更加容易。 CSS 文件的顶部。
我还分享了一个非常早期的想法，我们正在探索如何在你的 CSS 文件中直接配置 Tailwind CSS，而不是在 JavaScript 中。使用基于 CSS 的配置、自动内容检测和简化的导入方式，将来配置 Tailwind 使用一些自定义颜色和字体可能像这样简单
@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 中提供。
我肯定会在发布前更详细地写一些关于这些内容的文章，但如果你想提前更仔细地看看，可以观看主题演讲。
我们在主题演讲的最后展示了Catalyst 的预览，这是我们从去年年底开始开发的新 React UI 工具包。
这是我们两年来一直放在路线图上的东西，经过几个月的最佳方法的完善，我们终于在去年 10 月开始着手开发。
Catalyst 是一个包含电池的组件系统，具有经过精心设计的 API，并包含构建自己的应用程序所需的所有基本构建块。它包括按钮、表单控件、对话框、滑出菜单、表格、下拉菜单等。
Catalyst 与我们现有的应用程序 UI 组件示例之间最大的区别在于，Catalyst 中的组件都像在真实项目中一样连接在一起，而不是孤立的复制粘贴代码片段。
但就像我们的网站模板一样，Catalyst 中的代码是你的。如果你想调整一些东西，只需打开文件并进行调整——它不是你通过 npm 安装的库。
把它想象成你自己的组件系统的起点。你从我们这里下载最新版本，将 /components 目录的内容复制到你的项目中，然后开始构建。
如果你需要更改一些东西，就更改它。
当你想要创建自己的新组件时，就创建它们。
整个想法是，在 6 个月后，代码库会让你感觉如此“属于你”，以至于你几乎会忘记你是用 Catalyst 启动它的。
在介绍项目并让大家参观了一番之后，我把项目交给了 Steve Schoger，他出色地讲解了 所有使 Catalyst 成为如此精致的设计系统的细微设计细节。
我最后展示了一些高级的 Tailwind CSS 技巧，我们不得不使用这些技巧来实现一些设计细节，比如如何使用 CSS 变量和 Tailwind 的任意属性功能来实现响应式过渡效果。
Catalyst 仍在开发中，所以不要对我抱有太大期望，但如果一切顺利，我们将在下个月左右发布早期版本，并与 Tailwind UI 用户分享更多细节。
接下来的三个小时，我们都在活动空间里闲逛，享用一些点心，并与所有来参加活动的人见面。
我在主题演讲中提到过，这是该项目历史上第一次将一群 Tailwind 粉丝聚集在一个房间里，对我来说，终于能见到这么多从使用该框架中获益的人，这是一种非常特别的体验。当所有事情都只是在 GitHub 和 Twitter 上进行时，很容易低估我们在这里所做工作的意义，而看到它在现实空间中以真实的人的形式体现出来，让我感到无比自豪。
能够参与这些项目，帮助这么多人更愉快地为网页构建东西，我感到非常荣幸。期待将来举办类似的活动——这对我来说绝对是一件人生大事。
查看 Tailwind Connect 2023 照片库，了解更多活动照片，并 在 YouTube 上观看主题演讲，如果你不能亲自参加。