ドキュメント
Frutjam のドキュメント — インストール、構成、テーマ、色、タイポグラフィー。 CSS のみ Tailwind CSS v4、JavaScript なし、WCAG AA にアクセス可能。 Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
これらのドキュメントでは、新しい Tailwind CSS v4 プロジェクトから完全にテーマ化されたアクセス可能な UI まで、取得するために必要なすべてをカバーしています。 installation (2 行の CSS) から始めて、CSS 変数と単一の data-theme 属性を使用してテーマ システムがどのように機能するかを調べます。カラー システムでは、手動によるカラー チェックを必要とせずに、WCAG AA コントラスト比を自動的に満たすセマンティック OKLCH トークンが使用されます。構成オプションを使用すると、トークンの範囲を指定したり、競合を回避するためにプレフィックスを追加したり、CSS 出力をスリムに保つために必要なコンポーネントのみを厳選したりすることができます。
色
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、およびあらゆるフレームワークで動作します。
どこから始めるべきか
Frutjamは初めてですか?このパスに従って、ゼロから完全にテーマを設定したアクセス可能な Tailwind CSS v4 プロジェクトに移行します。
- 1インストール
npm パッケージをインストールし、CSS に 2 行を追加します。 JavaScript 構成や PostCSS プラグインはありません。
- 2概要
Frutjam が Tailwind CSS ユーティリティ、セマンティック コンポーネント クラス、および WCAG AA カラー トークンとどのように連携するかを理解します。
- 3テーマ
組み込みのテーマを適用するか、CSS 変数と単一の
data-theme属性を使用して独自のテーマを構築します。 - 4色
Learn how semantic color tokens work and how every
on-{color}pair guarantees WCAG AA contrast automatically. - 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 リクエストが追加されます。