上个月,超过 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 文件中配置 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 工具包。
这是我们两年前就已经在路线图上的项目,经过几个月的最佳方法的磨合,我们终于在去年十月开始了这个项目。
Catalyst 是一个包含电池的组件系统,具有精心设计的 API,包括构建你自己应用程序所需的所有基本构建块。它包括按钮、表单控件、对话框、滑动覆盖、表格、下拉菜单等。
Catalyst 与我们现有的应用程序 UI 组件示例之间的最大区别在于, Catalyst 中的组件都是像在实际项目中那样连接在一起的,而不是孤立的复制粘贴代码片段。
但就像我们的网站模板一样, Catalyst 中的代码是你的。如果你想调整某些内容,只需打开文件并进行调整——它不是通过 npm 安装的库。
把它想象成你自己的组件系统的起点。你从我们这里下载最新版本,将 /components 目录的内容复制到你的项目中,然后开始构建。
如果你需要更改某些内容,就更改它。
当你想创建自己的新组件时,就创建它们。
整个想法是,在 6 个月后,代码库感觉如此_属于你_,你几乎会忘记你最初是用 Catalyst 启动的。
在介绍了项目并带大家参观了一下之后,我把时间交给了Steve Schoger,他做得非常出色,详细讲解了所有的小设计细节,这些细节使 Catalyst 感觉像一个精致的设计系统。
我通过展示一些我们必须使用的高级 Tailwind CSS 技巧来实现这些设计细节,比如如何使用 CSS 变量和 Tailwind 的任意属性功能与 Framer Motion 实现响应式过渡,来结束演讲。
Catalyst 仍在开发中,所以不要对我太苛刻,但如果一切顺利,我们将在下个月左右为 Tailwind UI 客户提供一个早期版本和更多细节。
接下来的三个小时,我们在活动场地享用一些点心,并与所有来参加活动的人见面交流。
我在主题演讲中提到过,这是项目历史上第一次我们把一群 Tailwind 粉丝聚集在同一个房间里,对我来说,能够见到这么多从使用这个框架中受益匪浅的人,真的是一次非常特别的经历。当一切都只在 GitHub 和 Twitter 上时,很容易低估我们在这里所做工作的影响,看到它在现实空间中与真实的人一起体现出来,让我感到无比自豪。
能够参与这些项目并帮助这么多人在构建 Web 内容时获得更多乐趣,真的是一种荣幸。期待未来能再次举办这样的活动——对我来说绝对是一个重要的生活亮点。
查看 Tailwind Connect 2023 照片库 以获取更多活动照片,并在 YouTube 上观看主题演讲 如果你不能亲自参加。