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.
Estos documentos cubren todo lo que necesita para pasar de un nuevo proyecto Tailwind CSS v4 a una interfaz de usuario accesible y totalmente temática. Comience con la Instalación (dos líneas de CSS) y luego explore cómo funciona el sistema de temas utilizando variables CSS y un único atributo data-theme. El sistema de color utiliza tokens OKLCH semánticos que cumplen automáticamente con las relaciones de contraste WCAG AA sin necesidad de realizar una verificación manual del color. Las opciones de configuración le permiten determinar el alcance de los tokens, agregar un prefijo para evitar conflictos o seleccionar solo los componentes que necesita para mantener su salida CSS optimizada.
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.
Por donde empezar
¿Nuevo en Frutjam? Siga este camino para pasar de cero a un proyecto Tailwind CSS v4 totalmente temático y accesible.
- 1Instalación
Instale el paquete npm y agregue dos líneas a su CSS. Sin configuración de JavaScript, sin complementos PostCSS.
- 2Descripción general
Comprenda cómo funciona Frutjam junto con las utilidades CSS de Tailwind, las clases de componentes semánticos y los tokens de color WCAG AA.
- 3Temas
Aplique un tema integrado o cree el suyo propio con variables CSS y un único atributo
data-theme. - 4Bandera
Descubra cómo funcionan los tokens de color semánticos y cómo cada par
on-{color}garantiza el contraste WCAG AA automáticamente. - 5Configuración
Establezca un prefijo, alcance tokens para un elemento raíz, seleccione componentes o intégrelo junto con otro marco CSS.
Preguntas frecuentes
¿Frutajam requiere Tailwind CSS v4?
Sí, Frutjam está diseñado para Tailwind CSS v4 y utiliza la directiva @plugin introducida en v4. No es compatible con Tailwind CSS v3. Si todavía está en la versión 3, actualice primero a la versión 4 utilizando la guía oficial de migración de Tailwind.
¿Frutjam es gratuito y de código abierto?
Sí, la biblioteca principal de componentes de Frutjam es gratuita y de código abierto (con licencia MIT). Los planes Pro y Team agregan bloques de interfaz de usuario premium, plantillas y solicitudes ilimitadas de Cherry MCP para la integración del editor de IA.