ドキュメント
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 のカラー システムは、すぐに WCAG AA コントラスト比を満たすように設計されたセマンティック CSS トークンを使用します。 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 プロジェクトで動作します。
インストール
CSS 専用の Tailwind CSS UI ライブラリである Frutjam を数分でインストールします。 2 つのインポート、ゼロ 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.