文档
Frutjam 文档 — 安装、配置、主题、颜色和排版。仅 CSS Tailwind CSS v4，零 JavaScript，可访问 WCAG AA。适用于 Django、HTMX、Laravel、React 和任何堆栈。
These docs cover everything you need to get from a fresh Tailwind CSS v4 project to a fully themed, accessible UI. Start with Installation — two lines of CSS — then explore how the theming system works using CSS variables and a single data-theme attribute. The color system uses semantic OKLCH tokens that automatically meet WCAG AA contrast ratios with no manual color checking required. Configuration options let you scope tokens, add a prefix to avoid conflicts, or cherry-pick only the components you need to keep your CSS output lean.
颜色
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 和任何框架。
Where to start
New to Frutjam? Follow this path to go from zero to a fully themed, accessible Tailwind CSS v4 project.
- 1Installation
Install the npm package and add two lines to your CSS. No JavaScript config, no PostCSS plugins.
- 2Overview
Understand how Frutjam works alongside Tailwind CSS utilities, semantic component classes, and WCAG AA color tokens.
- 3Themes
Apply a built-in theme or build your own with CSS variables and a single
data-themeattribute. - 4Colors
Learn how semantic color tokens work and how every
on-{color}pair guarantees WCAG AA contrast automatically. - 5Configuration
Set a prefix, scope tokens to a root element, cherry-pick components, or integrate alongside another CSS framework.
Frequently asked questions
Does Frutjam require Tailwind CSS v4?
Yes — Frutjam is built for Tailwind CSS v4 and uses the @plugin directive introduced in v4. It is not compatible with Tailwind CSS v3. If you are still on v3, upgrade to v4 first using the official Tailwind migration guide.
Is Frutjam free and open source?
Yes — the core Frutjam component library is free and open source (MIT licensed). Pro and Team plans add premium UI blocks, templates, and unlimited Cherry MCP requests for AI editor integration.