Dokumente
Frutjam-Dokumentation – Installation, Konfiguration, Themen, Farben und Typografie. Nur CSS, Tailwind CSS v4, kein JavaScript, WCAG AA zugänglich. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
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.
Farben
Das Farbsystem von Frutjam verwendet semantische CSS-Token, die so konzipiert sind, dass sie standardmäßig die WCAG AA-Kontrastverhältnisse erfüllen. Kein JavaScript, Dark Mode-fähig, kompatibel mit Tailwind CSS v4. Funktioniert mit Django, HTMX, Laravel und jedem reinen CSS-Stack.
Überblick
Frutjam ist eine kostenlose, reine CSS-UI-Bibliothek von Tailwind CSS v4. Kein JavaScript, WCAG AA/AAA zugänglich, Framework-unabhängig. Erstellen Sie moderne Schnittstellen mit semantischen Komponenten, die mit Django, HTMX, Laravel, React und jedem Stack funktionieren.
Themen
Das reine CSS-Designsystem von Frutjam verwendet CSS-Variablen und ein einzelnes Datenattribut. Wechseln Sie ohne JavaScript zwischen hellen, dunklen und benutzerdefinierten Designs. Integrierte WCAG AA-Farbtoken, funktioniert mit Django, HTMX, Laravel und jedem Tailwind CSS v4-Projekt.
Installation
Installieren Sie Frutjam, die reine CSS-UI-Bibliothek von Tailwind, in wenigen Minuten. Zwei Importe, kein JavaScript, WCAG-zugängliche Komponenten sofort einsatzbereit. Funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt.
Konfiguration
Konfigurieren Sie das Nur-CSS-Tailwind-CSS-Plugin von Frutjam. Legen Sie Standardthemen fest, definieren Sie benutzerdefinierte Farbtokens, schalten Sie das Präfixsystem um – kein JavaScript erforderlich. WCAG-zugängliche Standardeinstellungen, funktioniert mit Django, HTMX, Laravel und jedem Framework.
Typografie
Frutjams reines CSS-Typografiesystem. Semantische HTML-Textskalierung mit Tailwind CSS v4, WCAG zugänglich, kein JavaScript erforderlich. Funktioniert mit Django, HTMX, Laravel, React und jedem Framework.
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.