Frutjam 是一个免费的纯 CSS Tailwind CSS v4 UI 库。零 JavaScript、WCAG AA/AAA 可访问、与框架无关。使用可与 Django、HTMX、Laravel、React 和任何堆栈配合使用的语义组件构建现代界面。
没有复杂的设置 - 它使用与 Tailwind CSS 相同的配置，因此您可以坚持使用您已经知道的内容。如果您熟悉 Bootstrap，组件名称会感觉直观且易于记住。
您可以将 Tailwind CSS 变体前缀（如 dark:、sm:、lg:、xl:、rtl: 和 ltr: 与我们的任何实用程序类一起使用。
采用速度优先框架的现代 UI 工程
Frutjam 是一个开源 Tailwind CSS v4 UI 库 - 旨在促进快速 Web 开发的高级抽象。将其视为一个工具包，可将原始实用程序类转换为语义化、可用于生产的组件，从而使您能够使用更少的代码构建现代界面。
它解决什么问题？
大多数开发人员都面临效用疲劳
，花费大量时间为按钮和输入等基本元素编写长长的类链。 Frutjam 通过提供即插即用
生态系统消除了这种摩擦。
- 冗余样板：您无需为每个项目重新发明轮子，而是可以获得开箱即用的处理焦点状态、悬停转换和响应行为的预构建组件
- 性能膨胀：与重型 JavaScript 框架不同，Frutjam 优先考虑“纯 CSS”方法，确保您的应用程序保持轻量级和快速
- 合规障碍：构建可访问且 SEO 友好的界面非常复杂。该库使用语义标记和干净的 HTML 来确保您的网站本质上符合 W3C 标准
如果您符合以下条件，Frutjam 就适合您：
- 厌倦了重复编写数千个实用程序类名称
- 需要在创纪录的时间内交付可访问、SEO 友好的登陆页面和 SaaS 应用程序
- 想要一个在任何环境下都完全兼容的一致设计系统吗？
- 更喜欢轻量级、与框架无关的解决方案，强制 JavaScript 依赖项为零
快速开发的核心功能
该工具包遵循复制、粘贴和构建
理念，提供专业级前端工程所需的一切
- 广泛的组件库：包括导航栏、模态框、手风琴和精炼数据表等基本元素
- 预组装块：使用定价部分、标题和英雄区域的布局块节省时间
Berry
主题系统：在 Snowberry（浅色）和 Darkberry（深色）等内置主题之间切换，或使用 OKLCH CSS 变量创建您自己的主题- 辅助功能优先设计：每个组件都遵循 ARIA 角色和键盘导航的最佳实践。所有颜色对都是手动调整的 OKLCH 值，经验证可通过 WCAG AA 对比度，而不是自动计算的猜测。
- 与框架无关：无论您使用的是 React、Next.js、Vue、Django、HTMX、Laravel 还是简单的静态 HTML，都可以无缝工作
技术效率
与标准的实用程序优先工作流程相比，通过使用语义类名称，您可以显着减小 HTML 大小。这会产生更干净、更易于维护的代码库，从长远来看，团队更容易管理。该库严格构建在 Tailwind CSS 之上，确保您保留实用程序引擎的所有自定义功能，同时获得基于组件的系统的速度。
准备好开始了吗？ 开始安装→