欢迎 David Luhr 加入 Tailwind Labs

Adam Wathan

去年夏天,我们开始与 David Luhr 进行项目合作,帮助我们开发 Figma 版本的 Tailwind UI(即将完成!),并在构建 Tailwind UI 模板时利用他的无障碍专业知识,确保我们遵循最佳实践,并提供适用于所有人的标记,无论他们使用什么工具浏览网页。

¥We started working with David Luhr last summer on a project-by-project basis to help us develop a Figma version of Tailwind UI (almost ready!), as well as to leverage his accessibility expertise when building Tailwind UI templates, ensuring we were following best practices and delivering markup that would work for everyone, no matter what tools they use to browse the web.

今天,我们很高兴地宣布 David 已正式加入团队!

¥Today we're excited to share that David has joined the team full-time!

Watch David build some Tailwind UI components in Figma live on his YouTube channel!

David 是一位无障碍专家、世界级的前端开发者、天才的教育家和富有同情心的领导者。他用 Figma 中的 Tailwind UI 创造了黑魔法,这连我和史蒂夫都没想到。他出色地将史蒂夫的 Tailwind UI 设计转化为像素完美的 HTML 和 CSS,让每个人都能轻松上手。

¥David is an accessibility expert, a world-class front-end developer, a gifted educator, and a compassionate leader. He's performed black magic with Tailwind UI in Figma that Steve and I didn't even know was possible, and he's been doing an incredible job turning Steve's Tailwind UI designs into pixel-perfect HTML and CSS that works for everyone.

HTML 学起来很容易,但精通起来却很难。David 对规范的了解是我在 20 年的 Web 开发生涯中从未遇到过的,他通过亲主体验实际设备,积累了丰富的知识,以至于需要多年的专注才能写出像 David 默认编写的那样完美无缺的标记。

¥Say what you will about HTML being easy to learn, it's a bear to master. David knows things about the spec that I've never encountered in 20 years of building things for the web, and has so much built up knowledge from his own real-world device testing that it would take years of dedicated focus to even come close to writing markup as bullet-proof as what David produces by default.

作为一家专注于帮助开发者更快地构建更佳界面的公司,我们有责任确保我们构建的工具默认遵循无障碍最佳实践,我们非常感谢 David 加入团队,帮助我们履行这一责任。

¥As a company that specializes in helping developers build better interfaces faster, it's our responsibility to make sure that the tools we build follow accessibility best practices by default, and we couldn't be more grateful to have David on the team to help us live up to that responsibility.

David 帮我解决的我最喜欢的问题之一是在 Tailwind CSS v2.0 中开发新的 ring utilities。当 David 第一次开始审核我们在 Tailwind UI 中改进无障碍功能的工作时,他提到我们的一些焦点风格不够明显。事实证明,仅仅改变按钮的颜色是不够的 - 重要的是在屏幕上绘制一些新的东西(比如对焦环),让任何人都能轻松看到。

¥One of my favorite problems David has helped me solve is developing the new ring utilities in Tailwind CSS v2.0. When David first started auditing our work in Tailwind UI for accessibility improvements, he mentioned that some of our focus styles were not obvious enough. It turns out that just changing a button's color for example isn't good enough — it's important that something new is drawn to the screen (like a focus ring) that is really easy for anyone to see.

想办法解决这个问题非常困难。它需要美观,需要能够直接使用实用程序类,并且能够在 Tailwind 内部实际实现。David 建议我们研究电子游戏机或 Apple TV 等设备的界面来寻找灵感,因为这些设备无法用鼠标交互,于是我们就尝试构建某种可自定义的偏移对焦环。

¥Trying to come up with a way to solve this was hard. It needed to look good, needed to be straightforward to do with utility classes, and needed to be possible to actually implement in Tailwind internally. David suggested we study the interfaces of things like video games consoles or the Apple TV for inspiration since you can't interact with them with a mouse, and that's where we landed on trying to build some sort of customizable offset focus ring.

实现这一点非常困难,因为它需要使用框阴影来实现,而且我们必须以某种方式使其可与现有的框阴影 API 组合。有很多时候我感到沮丧,如果我一个人做的话,我甚至可能放弃,但最终我们搞定了,现在它是框架中我最喜欢的功能之一。

¥Coming up with an implementation for this was hard because it needed to be implemented with a box shadow, and we had to somehow make it composable with the existing box shadow API. There were many moments where I got frustrated and I might have even given up on it if I was working on it alone, but ultimately we figured it out and now it's one of my favorite features in the framework.

David 将领导 Tailwind UI 的组件和设计资源开发,并为我们其他项目(如 Tailwind CSS 和 Headless UI)提供无障碍指导。过去六个月与他共事是一段奇妙的经历,我们非常高兴他能全职加入团队。

¥David will be leading component and design asset development on Tailwind UI, and providing accessibility guidance on our other projects like Tailwind CSS and Headless UI. It's been an amazing experience working with him over the last 6 months and we are so excited to have him on the team full-time.

想要跟进 David 的工作进度吗?Follow David on Twitter →

¥Want to keep up with David's work? Follow David on Twitter →

TailwindCSS v4.1 中文网 - 粤ICP备13048890号