구성

마지막 업데이트: 7월 13, 2026

Frutjam CSS 전용 Tailwind CSS 플러그인을 구성합니다. 기본 테마를 설정하고, 사용자 정의 색상 토큰을 정의하고, 접두사 시스템을 전환합니다. JavaScript가 필요하지 않습니다. WCAG 액세스 가능 기본값은 Django, HTMX, Laravel 및 모든 프레임워크에서 작동합니다.

프로젝트에 맞게 Frutjam CSS 전용 Tailwind CSS 플러그인을 구성하세요. 테마 설정, 사용자 정의 색상 토큰 정의, 접두사 시스템 전환 및 체리 선택 구성 요소 — JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 기본값. Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.

기본 설정

@plugin 지시어를 사용하여 CSS 파일에 Frutjam을 추가하세요. 옵션이 필요하지 않습니다. 모든 것이 기본적으로 작동합니다.

@import "tailwindcss";
@plugin "frutjam";

플러그인 옵션

@plugin 블록 내부에 옵션을 전달하여 Frutjam을 사용자 정의하세요.

@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
  reset: true;
  root: :host;
  include: button, card, alert;
  /* or: */
  exclude: table, timeline;
}

접두사

자신의 CSS와의 충돌을 피하기 위해 모든 Frutjam 클래스 이름에 접두사를 추가합니다.

@plugin "frutjam" {
  prefix: fj;
}

<button class="fj-btn fj-btn-primary">Send mail</button>

접두사의 동작 방식은 Tailwind의 prefix() 옵션도 사용하는지 여부에 따라 달라집니다.

Frutja 접두사만 해당

Frutjam 클래스 이름에는 접두사가 붙습니다. HTML에서 직접 사용하세요.

@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
}

<button class="fj-btn">Button</button>

Tailwind 접두사만 해당

Tailwind의 prefix()는 변형으로 작동합니다. 모든 유틸리티(Frutjam 포함)에는 HTML의 변형 선택기로 접두사가 필요합니다.

@import "tailwindcss" prefix(tw);
@plugin "frutjam";

<button class="tw:btn">Button</button>

두 접두사

Frutjam은 클래스 이름을 바꾸며(예: fj-btn), 맨 위에 Tailwind의 변형 접두사가 필요합니다.

@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
  prefix: fj;
}

<button class="tw:fj-btn">Button</button>

다시 놓기

Frutjam이 기본 요소 재설정(재부팅 스타일)을 주입하는지 여부를 제어합니다. 기본값은 true입니다.

true인 경우 Frutjam은 Tailwind의 프리플라이트와 유사하게 상자 모델, 타이포그래피, 목록, 미디어 및 양식 요소를 재설정합니다. false인 경우 CSS 변수 토큰만 삽입됩니다. 원시 요소 스타일은 완전히 건너뜁니다.

*, html, body, h1-h6 및 button와 같은 요소의 충돌을 방지하려면 이미 다른 CSS 프레임워크(Bootstrap, Bulma 등)를 사용하고 있거나 직접 재설정한 경우 false로 설정하세요.

@plugin "frutjam" {
  reset: false;
}

뿌리

Frutjam이 디자인 토큰 변수(--color-primary, --color-base 등)를 등록하는 CSS 선택기입니다. 기본값은 :root입니다.

세 가지 유용한 값이 있습니다.

값	언제 사용하나요?
`:root`	기본. 토큰은 전체 페이지에서 전 세계적으로 사용할 수 있습니다.
`:host`	Shadow DOM/웹 구성 요소. 누출되지 않도록 구성 요소 내부의 토큰 범위를 지정합니다.
모든 선택기(예: `#app`)	토큰의 범위를 특정 래퍼 요소로 지정합니다. Frutjam이 동일한 페이지에서 다른 프레임워크와 공존할 때 유용합니다.

기본값 — 전역 토큰

@plugin "frutjam" {
  root: :root;
}

Shadow DOM/웹 구성 요소

@plugin "frutjam" {
  root: :host;
}

래퍼 요소로 범위가 지정됨

다른 프레임워크가 이미 :root를 제어하는 경우(예: Bootstrap이 자체 --bs-* 변수 및 본문 색상을 설정) 대신 Frutjam이 컨테이너 요소를 가리킵니다. 이렇게 하면 color, ground-color 및 모든 CSS 변수가 :root 밖으로 이동되어 해당 래퍼 내부에만 적용됩니다.

@plugin "frutjam" {
  prefix: fj;
  reset: false;
  root: #my-app;
}

<div id="my-app" data-theme="blueberry">
  <!-- Frutjam components here, Bootstrap outside -->
  <button class="fj-btn fj-btn-primary">Send</button>
</div>

포함하다

전체 라이브러리 대신 특정 구성 요소만 로드합니다. 생산 시 출력 크기를 줄이는 데 유용합니다.

@plugin "frutjam" {
  include: button, card, alert, badge;
}

들어오지 못하게 하다

나열된 구성요소를 제외한 모든 구성요소를 로드합니다. 전체 빌드에서 몇 가지 구성 요소만 삭제해야 하는 경우에 사용합니다.

@plugin "frutjam" {
  exclude: table, timeline, chat;
}

맞춤 테마 만들기

자신만의 테마를 만들려면 [data-theme="your-theme-name"] 선택기 내에서 제공된 CSS 변수에 색상 값을 할당하세요.

1. The "Automatic" Approach (Minimal)

이 버전에서는 --color-on-* 변수를 생략했습니다. Frutjam은 누락된 변수를 감지하고 최적의 텍스트 색상을 계산합니다. 일반적으로 매우 밝은 OKLCH 값 사이를 전환하여 구성 요소에 계속 액세스하고 읽을 수 있도록 합니다.

@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-info: oklch(0.685 0.169 237.323);
        --color-success: oklch(0.792 0.209 151.711);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-error: oklch(0.577 0.245 27.325);
    }
}

2. The "Manual" Approach (Full Control)

이 버전에서는 --color-on-* 변수를 명시적으로 정의합니다. 이는 특정 브랜드 지침(예: 순백색 대신 색조가 있는 회백색 사용)이 있거나 접근성 검사를 통과하는 저대비의 세련된 외관과 같은 특정 "분위기"를 달성하려는 경우에 이상적입니다.

@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-on-base:oklch(0.22 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-on-neutral: oklch(1 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-on-primary: oklch(96.2% 0.018 272.314);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-on-secondary: oklch(1 0 0);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-on-accent: oklch(1 0 0);
        --color-info: oklch(0.685 0.169 237.323);
        --color-on-info: oklch(0.15 0 0);
        --color-success: oklch(0.792 0.209 151.711);
        --color-on-success: oklch(0.15 0 0);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-on-warning: oklch(0.15 0 0);
        --color-error: oklch(0.577 0.245 27.325);
        --color-on-error: oklch(1 0 0);
    }
}

HTML의 프로젝트에 사용자 정의 테마를 적용하려면 HTML 요소에 data-theme="your-theme-name"을 사용하세요.

<html data-theme="your-theme-name">
 ...
</html>

테마는 중첩될 수 있습니다. HTML의 모든 섹션에 특정 테마를 적용하여 해당 영역의 전체 테마를 재정의할 수 있습니다.

<html data-theme="light">
  <div data-theme="dark">
    This div uses the dark theme.
    <span data-theme="your-custom-theme">
      This span uses the your-custom-theme
    </span>
  </div>
</html>

추가 자료

사용 가능한 내장 테마 — Snowberry, Darkberry 및 포함된 모든 테마를 찾아보세요.
컬러 시스템 참고 — CSS 색상 변수의 전체 목록 및 구성 요소에 매핑되는 방법

구성