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.
Diese Dokumente decken alles ab, was Sie benötigen, um von einem neuen Tailwind CSS v4-Projekt zu einer vollständig thematisch gestalteten, barrierefreien Benutzeroberfläche zu gelangen. Beginnen Sie mit der Installation – zwei Zeilen CSS – und erkunden Sie dann, wie das Theming-System mithilfe von CSS-Variablen und einem einzelnen data-theme-Attribut funktioniert. Das Farbsystem verwendet semantische OKLCH-Token, die automatisch die WCAG AA-Kontrastverhältnisse erfüllen, ohne dass eine manuelle Farbprüfung erforderlich ist. Mit den Konfigurationsoptionen können Sie Tokens festlegen, ein Präfix hinzufügen, um Konflikte zu vermeiden, oder nur die Komponenten auswählen, die Sie benötigen, um Ihre CSS-Ausgabe schlank zu halten.
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.
Wo soll ich anfangen?
Neu bei Frutjam? Folgen Sie diesem Weg, um von Null zu einem vollständig themenbezogenen, barrierefreien Tailwind CSS v4-Projekt zu gelangen.
- 1Installation
Installieren Sie das npm-Paket und fügen Sie Ihrem CSS zwei Zeilen hinzu. Keine JavaScript-Konfiguration, keine PostCSS-Plugins.
- 2Überblick
Verstehen Sie, wie Frutjam zusammen mit Tailwind-CSS-Dienstprogrammen, semantischen Komponentenklassen und WCAG-AA-Farbtokens funktioniert.
- 3Themen
Wenden Sie ein integriertes Theme an oder erstellen Sie Ihr eigenes mit CSS-Variablen und einem einzelnen
data-theme-Attribut. - 4Farben
Erfahren Sie, wie semantische Farbtoken funktionieren und wie jedes
on-{color}-Paar automatisch den WCAG AA-Kontrast garantiert. - 5Konfiguration
Legen Sie ein Präfix fest, beschränken Sie Token auf ein Stammelement, wählen Sie Komponenten aus oder integrieren Sie sie zusammen mit einem anderen CSS-Framework.
Häufig gestellte Fragen
Benötigt Frutjam Tailwind CSS v4?
Ja – Frutjam wurde für Tailwind CSS v4 erstellt und verwendet die in v4 eingeführte @plugin-Direktive. Es ist nicht mit Tailwind CSS v3 kompatibel. Wenn Sie noch Version 3 verwenden, aktualisieren Sie zunächst mithilfe des offiziellen Tailwind-Migrationsleitfadens auf Version 4.
Ist Frutjam kostenlos und Open Source?
Ja – die Kernkomponentenbibliothek von Frutjam ist kostenlos und Open Source (MIT-lizenziert). Pro- und Team-Pläne fügen Premium-UI-Blöcke, Vorlagen und unbegrenzte Cherry MCP-Anfragen für die AI-Editor-Integration hinzu.
Kann ich Frutjam verwenden, ohne alle Dokumente zu lesen?
Ja. Installieren Sie es, wählen Sie ein Thema aus und beginnen Sie mit der Verwendung von Komponentenklassen. Bei den Dokumenten handelt es sich um Referenzmaterial – Sie müssen sie nicht vollständig lesen. Die meisten Entwickler beginnen mit der Schaltfläche oder der Kartenkomponente und erkunden von dort aus.