文章摘要
Tailwind Plus 现在支持原生 JavaScript,所有 UI 组件(如下拉菜单、命令面板、对话框等)都无需依赖 React 或 Vue 等框架即可完全功能化、可访问且交互性强。为此,Tailwind Plus 推出了 @tailwindplus/elements 库,专为 Tailwind Plus 用户提供,使开发者能够在任何项目中轻松使用这些组件。
文章总结
Tailwind Plus 新增对原生 JavaScript 的支持
Tailwind Plus 中的许多 UI 组件(如对话框、下拉菜单、命令面板等)都需要 JavaScript 来实现其功能。对于不使用 React 或 Vue 的开发者来说,使用这些组件通常意味着需要自己编写复杂的 JavaScript 代码。然而,现在这一情况终于得到了改变——Tailwind Plus 中的所有 UI 组件现在都可以完全通过原生 HTML 实现,并且具备交互性和可访问性。
这意味着开发者可以在任何项目中使用这些组件,而无需依赖任何 JavaScript 框架。为了实现这一目标,Tailwind 团队推出了 @tailwindplus/elements 库,该库专为 Tailwind Plus 用户设计。Elements 是一组无头(headless)的自定义元素,封装了构建交互式 UI 所需的复杂行为,开发者可以通过 HTML 直接使用这些元素,并通过工具类或自定义 CSS 进行样式调整。
这些自定义元素不依赖于任何特定的 JavaScript 框架,只需在 HTML 中引入 <script> 标签即可使用。例如,开发者可以通过 <el-dropdown> 和 <el-menu> 等自定义元素轻松构建下拉菜单,而无需编写任何 JavaScript 代码。
此外,Elements 还支持自动管理 ARIA 属性、焦点处理、键盘支持等功能,使得开发者可以轻松构建复杂的 UI 组件,如命令面板、对话框等。Tailwind Plus 的首次发布中,Elements 提供了多个基础组件,包括自动完成、命令面板、对话框、下拉菜单、弹出框、选择菜单和标签页等。
为了确保 Elements 在现代浏览器中的兼容性,Tailwind 团队还提供了必要的 polyfill,并利用了现代 Web 平台特性,如自定义元素、popover 属性、原生 <dialog> 元素等。这些特性使得 Elements 能够在所有支持 Tailwind CSS v4.0 的浏览器中运行,并且随着这些现代特性的普及,Elements 的体积将进一步减小。
由于 HTML 是所有 Web 框架的通用语言,Elements 使得 Tailwind Plus 中的 UI 组件可以在任何框架中使用,无论是 Svelte、Rails 还是 React。开发者可以通过 Elements 轻松实现双向绑定、表单提交等功能,而无需依赖特定框架的库。
所有更新后的 UI 组件和 Elements 库现已对所有 Tailwind Plus 用户开放。开发者可以通过探索新的 Elements 文档,了解如何使用和自定义这些组件,并尝试构建自己的交互式 UI。
评论总结
评论主要围绕Tailwind的自定义元素功能展开,观点多样,既有对其技术实现的兴趣,也有对其收费模式的批评。
对自定义元素技术的兴趣
- 评论1提到对自定义元素的实现方式感兴趣,并提到Lit框架的使用:"Would love to know how they went about implementing these. I always find custom elements interesting."
- 评论7指出这些组件基于标准的Web组件,无需依赖现有JavaScript框架:"Looks like it's done using standards-based web components... Nice to see devs picking up web components."
对收费模式的批评
- 评论5认为自定义元素功能应该是免费的,而框架集成才应收费:"This is a exciting use-case for custom elements... but it’s hilariously a paid feature?!"
- 评论10表达了对该功能的强烈兴趣,但对其收费感到遗憾:"This is the only feature I genuinely want available for tailwind free users too... That’s a shame."
与其他框架的比较
- 评论6对比了Tailwind和Bootstrap的代码风格,指出Tailwind虽然提供了更多控制,但Bootstrap也有类似的实用类:"I realize you have full control over looks with TW, but Bootstrap and others have utility classes too for the common stuff."
- 评论9希望了解Tailwind与React等框架的对比:"I would like to know how they find it in comparison to a framework like react."
对Tailwind未来发展的期望
- 评论8希望有人能资助Tailwind,使其完全免费,以便更好地与其他项目集成:"The world would be a significantly better place if someone could throw a small mountain of money at the Tailwind folks..."
- 评论11则对Tailwind的长期支持表示怀疑,提到其曾经支持Vue但现已基本放弃:"I wouldn’t get too excited about it to be honest... it is now basically abandoned."
总结:评论者对Tailwind的自定义元素功能表现出浓厚兴趣,但对其收费模式表示不满,并希望看到与其他框架的对比及更广泛的免费支持。