Documentos
Documentación de Frutjam: instalación, configuración, temática, colores y tipografía. Tailwind CSS v4 solo para CSS, cero JavaScript, WCAG AA accesible. Funciona con Django, HTMX, Laravel, React y cualquier pila.
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.
Bandera
El sistema de color de Frutjam utiliza tokens CSS semánticos diseñados para cumplir con las relaciones de contraste WCAG AA desde el primer momento. Sin JavaScript, compatible con el modo oscuro, compatible con Tailwind CSS v4. Funciona con Django, HTMX, Laravel y cualquier pila de solo CSS.
Descripción general
Frutjam es una biblioteca de interfaz de usuario Tailwind CSS v4 gratuita solo para CSS. JavaScript cero, accesible WCAG AA/AAA, independiente del marco. Cree interfaces modernas con componentes semánticos que funcionen con Django, HTMX, Laravel, React y cualquier pila.
Temas
El sistema de temas solo CSS de Frutjam utiliza variables CSS y un único atributo de datos. Cambie temas claros, oscuros y personalizados sin JavaScript. Tokens de color WCAG AA integrados, funcionan con Django, HTMX, Laravel y cualquier proyecto Tailwind CSS v4.
Instalación
Instale Frutjam, la biblioteca de interfaz de usuario CSS de Tailwind solo para CSS, en minutos. Dos importaciones, cero JavaScript, componentes accesibles WCAG listos para usar. Funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4.
Configuración
Configure el complemento CSS Tailwind exclusivo de Frutjam CSS. Establezca temas predeterminados, defina tokens de colores personalizados, alterne el sistema de prefijos: no se requiere JavaScript. Valores predeterminados accesibles de WCAG, funciona con Django, HTMX, Laravel y cualquier marco.
Tipografía
El sistema de tipografía solo CSS de Frutjam. Escalado de texto HTML semántico con Tailwind CSS v4, accesible WCAG, no se requiere JavaScript. Funciona con Django, HTMX, Laravel, React y cualquier 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.