문서
Frutjam 문서 — 설치, 구성, 테마, 색상 및 인쇄술. CSS 전용 Tailwind CSS v4, JavaScript 없음, WCAG AA 액세스 가능. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
이 문서는 새로운 Tailwind CSS v4 프로젝트에서 완전히 테마가 있고 액세스 가능한 UI에 이르기까지 필요한 모든 것을 다룹니다. 설치(CSS 두 줄)로 시작한 다음 CSS 변수와 단일 data-theme 속성을 사용하여 테마 지정 시스템이 어떻게 작동하는지 살펴보세요. 색상 시스템은 수동 색상 확인이 필요 없이 WCAG AA 명암비를 자동으로 충족하는 의미 체계 OKLCH 토큰을 사용합니다. 구성 옵션을 사용하면 토큰 범위를 지정하고, 충돌을 피하기 위해 접두사를 추가하거나, CSS 출력을 간결하게 유지하는 데 필요한 구성 요소만 선별할 수 있습니다.
그림 물감
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 및 모든 프레임워크에서 작동합니다.
어디서부터 시작해야 할까요?
Frutjam을 처음 사용하시나요? 이 경로를 따라 완전히 테마가 있고 액세스 가능한 Tailwind CSS v4 프로젝트로 이동하세요.
- 1설치
npm 패키지를 설치하고 CSS에 두 줄을 추가합니다. JavaScript 구성도 없고 PostCSS 플러그인도 없습니다.
- 2개요
Frutjam이 Tailwind CSS 유틸리티, 의미 구성 요소 클래스 및 WCAG AA 색상 토큰과 함께 작동하는 방식을 이해합니다.
- 3테마
내장 테마를 적용하거나 CSS 변수와 단일
data-theme속성을 사용하여 직접 테마를 만들어 보세요. - 4그림 물감
의미론적 색상 토큰이 작동하는 방식과 모든
on-{color}쌍이 WCAG AA 대비를 자동으로 보장하는 방법을 알아보세요. - 5구성
접두사, 범위 토큰을 루트 요소로 설정하고, 구성 요소를 선별하거나, 다른 CSS 프레임워크와 함께 통합하세요.
자주 묻는 질문
Frutja에는 Tailwind CSS v4가 필요합니까?
예 — Frutjam은 Tailwind CSS v4용으로 제작되었으며 v4에 도입된 @plugin 지시어를 사용합니다. Tailwind CSS v3과 호환되지 않습니다. 아직 v3를 사용하고 있다면 먼저 공식 Tailwind 마이그레이션 가이드를 사용하여 v4로 업그레이드하세요.
Frutjam은 무료이며 오픈 소스인가요?
예. 핵심 Frutjam 구성 요소 라이브러리는 무료이며 오픈 소스입니다(MIT 라이선스). Pro 및 Team 플랜에는 AI 편집기 통합을 위한 프리미엄 UI 블록, 템플릿 및 무제한 Cherry MCP 요청이 추가됩니다.