Docs
Frutjam documentation — installation, configuration, theming, colors, and typography. CSS-only Tailwind CSS v4, zero JavaScript, WCAG AA accessible. Works with Django, HTMX, Laravel, React, and any 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.
Colors
Frutjam's color system uses semantic CSS tokens designed to meet WCAG AA contrast ratios out of the box. No JavaScript, dark mode aware, compatible with Tailwind CSS v4. Works with Django, HTMX, Laravel, and any CSS-only stack.
Overview
Frutjam is a free CSS-only Tailwind CSS v4 UI library. Zero JavaScript, WCAG AA/AAA accessible, framework-agnostic. Build modern interfaces with semantic components that work with Django, HTMX, Laravel, React, and any stack.
Themes
Frutjam's CSS-only theming system uses CSS variables and a single data attribute. Switch light, dark, and custom themes with no JavaScript. WCAG AA color tokens built in, works with Django, HTMX, Laravel, and any Tailwind CSS v4 project.
Installation
Install Frutjam, the CSS-only Tailwind CSS UI library, in minutes. Two imports, zero JavaScript, WCAG accessible components out of the box. Works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.
Configuration
Configure the Frutjam CSS-only Tailwind CSS plugin. Set default themes, define custom color tokens, toggle the prefix system - zero JavaScript required. WCAG accessible defaults, works with Django, HTMX, Laravel, and any framework.
Typography
Frutjam's CSS-only typography system. Semantic HTML text scaling with Tailwind CSS v4, WCAG accessible, no JavaScript required. Works with Django, HTMX, Laravel, React, and any framework.
Bắt đầu từ đâu
Bạn mới sử dụng Frutjam? Đi theo con đường này để đi từ con số 0 đến dự án Tailwind CSS v4 có đầy đủ chủ đề và dễ tiếp cận.
- 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.
Câu hỏi thường gặp
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.