문서
Frutjam 문서 — 설치, 구성, 테마, 색상 및 인쇄술. CSS 전용 Tailwind CSS v4, JavaScript 없음, WCAG AA 액세스 가능. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
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.
그림 물감
Frutjam의 색상 시스템은 기본적으로 WCAG AA 명암비를 충족하도록 설계된 시맨틱 CSS 토큰을 사용합니다. JavaScript가 없고 어두운 모드를 인식하며 Tailwind CSS v4와 호환됩니다. Django, HTMX, Laravel 및 모든 CSS 전용 스택에서 작동합니다.
개요
Frutjam은 무료 CSS 전용 Tailwind CSS v4 UI 라이브러리입니다. 제로 JavaScript, WCAG AA/AAA 액세스 가능, 프레임워크에 구애받지 않음. Django, HTMX, Laravel, React 및 모든 스택에서 작동하는 의미 체계 구성 요소를 사용하여 최신 인터페이스를 구축하세요.
테마
Frutjam의 CSS 전용 테마 시스템은 CSS 변수와 단일 데이터 속성을 사용합니다. JavaScript 없이 밝은 테마, 어두운 테마, 맞춤 테마를 전환하세요. WCAG AA 색상 토큰이 내장되어 있으며 Django, HTMX, Laravel 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
설치
CSS 전용 Tailwind CSS UI 라이브러리인 Frutjam을 몇 분 안에 설치하세요. 두 개의 가져오기, 제로 JavaScript, WCAG 액세스 가능 구성요소를 즉시 사용할 수 있습니다. Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
구성
Frutjam CSS 전용 Tailwind CSS 플러그인을 구성합니다. 기본 테마 설정, 사용자 정의 색상 토큰 정의, 접두사 시스템 전환 - JavaScript가 필요하지 않습니다. WCAG 액세스 가능 기본값은 Django, HTMX, Laravel 및 모든 프레임워크에서 작동합니다.
타이포그래피
Frutjam의 CSS 전용 타이포그래피 시스템. Tailwind CSS v4, WCAG 액세스 가능, JavaScript가 필요하지 않은 의미론적 HTML 텍스트 크기 조정. Django, HTMX, Laravel, React 및 모든 프레임워크에서 작동합니다.
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.