跳转到主内容

文档

Frutjam 文档 — 安装、配置、主题、颜色和排版。仅 CSS Tailwind CSS v4,零 JavaScript,可访问 WCAG AA。适用于 Django、HTMX、Laravel、React 和任何堆栈。

这些文档涵盖了从新的 Tailwind CSS v4 项目到完全主题化、可访问的 UI 所需的一切。从安装(两行 CSS)开始,然后探索主题系统如何使用 CSS 变量和单个 data-theme 属性来工作。颜色系统使用语义 OKLCH 标记,自动满足 WCAG AA 对比度,无需手动颜色检查。通过配置选项,您可以确定令牌的范围、添加前缀以避免冲突,或者仅挑选保持 CSS 输出精简所需的组件。

颜色

Frutjam 的颜色系统使用语义 CSS 标记,旨在满足开箱即用的 WCAG AA 对比度。无需 JavaScript,支持深色模式,兼容 Tailwind CSS v4。适用于 Django、HTMX、Laravel 和任何纯 CSS 堆栈。

概述

Frutjam 是一个免费的纯 CSS Tailwind CSS v4 UI 库。零 JavaScript、WCAG AA/AAA 可访问、与框架无关。使用可与 Django、HTMX、Laravel、React 和任何堆栈配合使用的语义组件构建现代界面。

主题

Frutjam 的纯 CSS 主题系统使用 CSS 变量和单个数据属性。无需 JavaScript 即可切换浅色、深色和自定义主题。内置 WCAG AA 颜色令牌,可与 Django、HTMX、Laravel 和任何 Tailwind CSS v4 项目配合使用。

安装

只需几分钟即可安装 Frutjam,这是纯 CSS 的 Tailwind CSS UI 库。两次导入、零 JavaScript、开箱即用的 WCAG 可访问组件。适用于 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目。

配置

配置仅限 Frutjam CSS 的 Tailwind CSS 插件。设置默认主题、定义自定义颜色标记、切换前缀系统 - 需要零 JavaScript。 WCAG 可访问的默认设置,适用于 Django、HTMX、Laravel 和任何框架。

版式

Frutjam 的纯 CSS 版式系统。使用 Tailwind CSS v4 进行语义 HTML 文本缩放,可访问 WCAG,无需 JavaScript。适用于 Django、HTMX、Laravel、React 和任何框架。

从哪里开始

Frutjam 新手?按照此路径从零到一个完全主题化、可访问的 Tailwind CSS v4 项目。

  1. 1
    安装

    安装 npm 包并向 CSS 添加两行。没有 JavaScript 配置,没有 PostCSS 插件。

  2. 2
    概述

    了解 Frutjam 如何与 Tailwind CSS 实用程序、语义组件类和 WCAG AA 颜色标记一起工作。

  3. 3
    主题

    应用内置主题或使用 CSS 变量和单个 data-theme 属性构建您自己的主题。

  4. 4
    颜色

    了解语义颜色标记的工作原理以及每个 on-{color} 对如何自动保证 WCAG AA 对比度。

  5. 5
    配置

    设置前缀、根元素的范围标记、精选组件或与另一个 CSS 框架集成。

常见问题

Frutjam 是否需要 Tailwind CSS v4?

是的 - Frutjam 是为 Tailwind CSS v4 构建的,并使用 v4 中引入的 @plugin 指令。它与 Tailwind CSS v3 不兼容。如果您仍在使用 v3,请首先使用官方 Tailwind 迁移指南升级到 v4。

Frutjam 是免费且开源的吗?

是的 — Frutjam 核心组件库是免费且开源的(MIT 许可)。 Pro 和 Team 计划添加了高级 UI 块、模板和用于 AI 编辑器集成的无限 Cherry MCP 请求。

我可以在不阅读所有文档的情况下使用 Frutjam 吗?

是的。安装它,选择一个主题,然后开始使用组件类。这些文档是参考资料——您无需从头到尾阅读它们。大多数开发人员从 buttoncard 组件开始,然后从那里开始探索。