成分
免费纯 CSS Tailwind CSS 组件，内置 WCAG AA/AAA 可访问性。无需 JavaScript，与框架无关，并且与 Django、HTMX、Laravel、React、Vue 和任何堆栈兼容。即用型且易于定制。
Frutjam 提供了 52 多个纯 CSS Tailwind CSS 组件 - 按钮、模式、表单、导航、数据显示等 - 专为 Tailwind CSS v4 构建。每个组件都使用与任何 Tailwind 实用程序类一起使用的语义类名称（.btn、.card、.badge）。没有捆绑 JavaScript，不需要 React 上下文，并且除了 Tailwind 本身之外也不需要 PostCSS 插件。每个组件均采用 WCAG AA 开箱即用，并配有手动调整的 OKLCH 颜色对，可保证每个表面上的可读对比度。由于 Frutjam 只支持 CSS 并且与框架无关，因此相同的 HTML 标记可以在 Django 模板、HTMX 响应、Laravel Blade、Rails ERB、React JSX 或纯静态 HTML 中工作，无需修改。
Frutjam 新手？
几秒钟内即可开始 - 两次导入即可开始构建。
手风琴
仅 CSS Tailwind CSS 手风琴使用原生 `<details>`/`<summary>`。使用零 JavaScript 展开和折叠内容部分。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
警报
仅限 CSS Tailwind CSS 警报，包含信息、成功、警告和错误变体。柔和的风格、图标槽和可忽略的图案。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
阿凡达
仅限 CSS Tailwind CSS 头像，用于个人资料图像。尺寸为 xs-xl，组堆叠和在线/离线状态指示器。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
徽章
仅 CSS Tailwind CSS 徽章，包含主要、次要、重音、信息、成功、警告和错误变体。柔和、轮廓和幻影样式，尺寸为 xs-lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
面包屑
纯 CSS Tailwind CSS 面包屑导航，具有自定义分隔符和可访问的地标标记。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目。
按钮
仅 CSS 的 Tailwind CSS 按钮，具有主要、次要、重音、重影、轮廓和软变体。尺寸为 xs-xl、加载状态、禁用和图标按钮。仅 CSS，WCAG AA，可与 Django、HTMX、Laravel、React 配合使用。
卡片
仅 CSS Tailwind CSS 卡，具有轮廓、阴影和平面样式。紧凑型、默认型和大尺寸。卡片内容、卡片标题、卡片页脚插槽。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何堆栈。
轮播
仅 CSS Tailwind CSS 轮播使用滚动捕捉。带有导航控件的水平幻灯片布局，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
聊天
仅 CSS Tailwind CSS 聊天气泡组件。发送和接收消息的开始和结束位置，带有头像和时间戳槽。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何堆栈。
复选框
仅 CSS 的 Tailwind CSS 复选框，具有主要、次要、重音和语义颜色变体。尺寸 xs-xl，不确定状态。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
可折叠
仅 CSS Tailwind CSS 可折叠面板使用原生 `<details>` 元素。无需 JavaScript 即可显示和隐藏内容部分。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
组合框
仅 CSS Tailwind CSS 组合框，具有实时搜索过滤和可访问的下拉列表。键盘导航，颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
倒计时
仅限 CSS Tailwind CSS 倒计时器。动画数字显示天、小时、分钟和秒。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
差异
仅 CSS 的 Tailwind CSS diff 查看器，用于与可拖动分隔符进行并排内容比较。无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
分频器
仅 CSS Tailwind CSS 分隔线 — 水平和垂直，带有可选的居中标签。颜色和尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
抽屉
仅 CSS Tailwind CSS 抽屉使用本机复选框切换。滑入式侧面板可用于导航或过滤器，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
页脚
纯 CSS Tailwind CSS 页脚，具有多列布局、徽标、链接和版权插槽。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目配合使用。
标头
仅 CSS Tailwind CSS 页面标题 — 带有品牌、导航和操作槽的顶部栏布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
英雄
仅限 CSS Tailwind CSS 登陆页面英雄部分。全角布局，标题、描述和 CTA 居中。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
指标
纯 CSS Tailwind CSS 指示器，用于在任何元素角上叠加徽章或点。颜色变体和定位。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
输入
仅 CSS Tailwind CSS 输入，具有主要、次要、重音和语义颜色变体。尺寸 xs-xl，前缀和后缀插件插槽，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
加入
仅 CSS Tailwind CSS 连接用于将按钮、输入或选择分组到连接的单元中。水平和垂直。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
大骨节病
仅 CSS Tailwind CSS kbd 组件，用于显示键盘快捷键和组合键。尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
关联
仅 CSS Tailwind CSS 链接主要颜色、次要颜色、强调色和中性颜色变体。将鼠标悬停在下划线和普通样式上。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
加载中
纯 CSS Tailwind CSS 加载指示器，带有旋转器、点、环和条形动画。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
跑马灯
仅 CSS Tailwind CSS 选取框，用于水平滚动内容和徽标。通过 CSS 控制速度和方向，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
面具
仅 CSS 的 Tailwind CSS 遮罩，用于将图像剪切成形状 - 圆形、方圆形、心形、六边形等。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
菜单
仅限 CSS Tailwind CSS 导航列表垂直菜单。活动、禁用和图标项目状态。尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
莫代尔
仅 CSS Tailwind CSS 模态使用原生 `<dialog>` 元素。响应式大小、背景和焦点陷阱。没有用于基本使用的 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
导航栏
仅 CSS Tailwind CSS 导航栏，包含品牌、导航链接和操作槽。粘性和透明变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
分页
仅 CSS 的 Tailwind CSS 分页，用于编号页面、上一页/下一页箭头、省略号间隙、可访问的无线电输入和页面跳转选择。无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
弹出窗口
仅 CSS Tailwind CSS 弹出窗口使用本机弹出窗口 API。用于工具提示和下拉菜单的浮动内容面板。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
进步
纯 CSS Tailwind CSS 进度条，具有主要、次要、重音和语义颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
放射状进步
仅限 CSS Tailwind CSS 径向进度 — 带百分比显示的圆形进度环。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
收音机
纯 CSS Tailwind CSS 单选按钮，具有主要、次要、重音和语义颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
范围
仅 CSS Tailwind CSS 范围滑块，具有主要、次要、重音和语义颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
等级
仅 CSS Tailwind CSS 星级和心率组件。尺寸 xs-xl，半星支持，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
选择
仅 CSS Tailwind CSS 选择下拉菜单，包含主要、次要、重音和语义颜色变体。尺寸 xs-xl，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
侧边栏
仅 CSS Tailwind CSS 侧边栏，用于侧面导航面板。可折叠，带有导航项状态和部分标题。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
骨骼
纯 CSS Tailwind CSS 骨架加载器，用于占位符 UI。带有脉冲动画的圆形、矩形和文本线形状。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
统计数据
仅 CSS Tailwind CSS stat 用于显示指标。值、标签、描述和图标槽。响应式网格布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
地位
仅 CSS Tailwind CSS 状态点指示器，具有主要、成功、警告和错误颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
步骤
仅 CSS Tailwind CSS 步骤用于多步骤向导和进度指示器。水平和垂直布局，每个步骤的颜色变化。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
表面
仅 CSS Tailwind CSS 表面，用于将主题背景和文本颜色应用到容器。所有颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
交换
仅 CSS Tailwind CSS 交换用于在两个元素之间切换。翻转、旋转和淡入淡出动画，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
桌子
仅 CSS 的 Tailwind CSS 表格，具有斑马条纹、紧凑和默认尺寸、固定列和行悬停状态。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
选项卡
仅 CSS 的 Tailwind CSS 选项卡，具有边框、提升、盒装和药丸样式变体。活动状态和大小，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
标签
仅 CSS Tailwind CSS 标签（芯片），具有颜色变体、柔和的风格和可移动按钮。尺寸为 xs-lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
文本区
仅 CSS 的 Tailwind CSS 文本区域，具有主要、次要、重音和语义颜色变体。尺寸 xs-xl，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
时间轴
仅 CSS Tailwind CSS 时间线，用于按时间顺序排列的事件列表。带有图标、内容和连接线槽的垂直布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
吐司
仅 CSS Tailwind CSS toast 用于通知定位 - 顶部、底部、开始、结束和中心放置。没有用于布局的 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
切换
仅 CSS Tailwind CSS 切换开关，具有主要、次要、重音和语义颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
工具提示
仅限 CSS Tailwind CSS 工具提示，具有顶部、底部、左侧和右侧位置。颜色变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
常见问题
所有 Frutjam 组件都仅使用 CSS 吗？
是的——绝大多数组件都是纯 CSS，JavaScript 为零。按钮、徽章、卡片、表单、警报、模式、抽屉、选项卡等都可以使用纯 HTML 和 CSS。少数没有本机 HTML 等效项的组件（toast 定位、组合框过滤、轮播控件）提供可选的轻量级 JS 帮助器，但 CSS 布局和样式根本不需要 JavaScript。
Frutjam 组件可以与 Django、HTMX 和 Laravel 一起使用吗？
是的——Frutjam 与框架无关。因为每个组件都是纯 CSS 的，所以它可以与任何服务器渲染的堆栈一起使用。 Django 模板、HTMX、Laravel Blade、Rails ERB、纯 HTML — 如果您可以输出 HTML，Frutjam 就可以。不需要 React，不需要构建管道，不需要 JavaScript 框架。
WCAG 组件是否可以访问？
是的 — 每个组件都保证 WCAG AA 对比度。每个颜色对（--color-primary / --color-on-primary 等）均在 OKLCH 中手动调整，以满足 WCAG AA 对比度要求。语义 HTML 元素贯穿始终 — 用于模式的本机 <dialog>、用于手风琴的 <details> 以及需要时适当的 ARIA 属性。
Frutjam 组件与 DaisyUI 相比如何？
两者都是仅 CSS 的 Tailwind CSS 组件库，但 Frutjam 是专门为 Tailwind CSS v4 构建的，使用 OKLCH 颜色标记和有保证的 WCAG AA 对比度对，并提供免费的 MCP 服务器（Cherry）用于 AI 编辑器集成 - DaisyUI 的同等服务器（Blueprint）是付费的。 Frutjam 还提供显式的 on-{color} 标记对，而不是在运行时计算前景色。
除了 Tailwind CSS 之外，我还需要安装其他东西吗？
只需多加一行。在 @import "tailwindcss"; 之后将 @plugin "frutjam"; 添加到 CSS 文件中，并通过 npm i -D frutjam 安装。就是这样——没有 PostCSS 插件，没有 JavaScript 配置，没有需要导入的单独样式表。所有组件均立即可用，并由 Tailwind 自动进行 Treeshaking。
我可以将 Frutjam 组件与 React 或 Next.js 一起使用吗？
是的。由于 Frutjam 仅支持 CSS，因此您可以在任何堆栈中以相同的方式使用组件 — 只需应用类名称。对于受益于 JavaScript 控制的少数组件（模态打开/关闭、toast、轮播），Frutjam 提供了可选的 React 钩子 (frutjam/react)，它包装本机 DOM 调用，无需额外的依赖项。