---
title: "Configuration"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Configure the Frutjam Tailwind CSS plugin. Customize themes, color tokens, prefix system, and component options -zero JavaScript required."
url: https://frutjam.com/tr/docs/configuration
---

# Configuration

Projenize uyacak şekilde yalnızca Frutjam CSS'ye özel Tailwind CSS eklentisini yapılandırın. Temaları ayarlayın, özel renk belirteçleri tanımlayın, önek sistemini değiştirin ve isteğe bağlı bileşenleri seçin; sıfır JavaScript gereklidir. WCAG AA'ya erişilebilir varsayılanlar. Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.

## Temel Kurulum

`@plugin` yönergesini kullanarak Frutjam'ı CSS dosyanıza ekleyin. Hiçbir seçeneğe gerek yok; her şey kutudan çıktığı gibi çalışıyor.

```css
@import "tailwindcss";
@plugin "frutjam";
```

## Eklenti Seçenekleri

`@plugin` bloğunun içindeki seçenekleri ileterek Frutjam'ı özelleştirin:

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

### önek

Kendi CSS'nizle çakışmaları önlemek için tüm Frutjam sınıf adlarına bir önek ekler.

```css
@plugin "frutjam" {
  prefix: fj;
}
```

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

Önekin nasıl davranacağı, Tailwind'in `prefix()` seçeneğini de kullanıp kullanmadığınıza bağlıdır:

#### Yalnızca Frutjam öneki

Frutjam sınıf adlarına ön ek eklenmiştir. Bunları doğrudan HTML'de kullanın.

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

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

#### Yalnızca arka rüzgar öneki

Tailwind'in `prefix()`'i bir değişken olarak çalışır; tüm yardımcı programlar (Frutjam'ınkiler dahil) HTML'de bir değişken seçici olarak öneki gerektirir.

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

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

#### Her iki önek

Frutjam sınıflarını yeniden adlandırır (ör. `fj-btn`) ve en üstte Tailwind'in değişken öneki gereklidir.

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

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

### sıfırlama

Frutjam'ın temel öğe sıfırlamalarını (yeniden başlatma stilleri) enjekte edip etmediğini kontrol eder. Varsayılan olarak `true`'dur.

`true` olduğunda Frutjam, Tailwind'in ön kontrolüne benzer şekilde kutu modelini, tipografiyi, listeleri, medyayı ve form öğelerini sıfırlar. `false` olduğunda yalnızca CSS değişken belirteçleri eklenir; ham öğe stilleri tamamen atlanır.

Zaten başka bir CSS çerçevesi (Bootstrap, Bulma vb.) kullanıyorsanız veya kendi sıfırlamanızı kullanıyorsanız, `*`, `html`, `body`, `h1–h6` ve `button` gibi öğelerde çakışmaları önlemek için `false` olarak ayarlayın.

```css
@plugin "frutjam" {
  reset: false;
}
```

### kök

Frutjam'ın tasarım belirteci değişkenlerini (`--color-primary`, `--color-base`, vb.) kaydettiği CSS seçici. Varsayılan olarak `:root` şeklindedir.

Üç yararlı değer vardır:

| Değer                            | Ne zaman kullanılmalı                                                                                                                    |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `:root`                          | Varsayılan. Tokenlar dünya çapında tüm sayfada mevcuttur.                                                                                |
| `:host`                          | Gölge DOM / Web Bileşenleri. Dışarı sızmamaları için bileşenin içindeki belirteçleri kapsam altına alır.                                 |
| Herhangi bir seçici (ör. `#app`) | Belirteçleri belirli bir sarmalayıcı öğeye kadar kapsar. Frutjam aynı sayfada başka bir çerçeveyle bir arada bulunduğunda kullanışlıdır. |

#### Varsayılan — küresel belirteçler

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

#### Gölge DOM / Web Bileşenleri

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

#### Bir sarmalayıcı öğenin kapsamı

Başka bir çerçeve zaten `:root`'u kontrol ediyorsa (örneğin, Bootstrap kendi `--bs-*` değişkenlerini ve gövde renklerini ayarlar), bunun yerine Frutjam'ı bir konteyner öğesine yönlendirin. Bu, `color`, `background-color` ve tüm CSS değişkenlerini `:root`'un dışına taşır, böylece yalnızca sarmalayıcının içinde uygulanırlar.

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

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

### katmak

Kütüphanenin tamamı yerine yalnızca belirli bileşenleri yükleyin. Üretimde çıktı boyutunu azaltmak için kullanışlıdır.

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

### hariç tutmak

Listelenenler dışındaki tüm bileşenleri yükleyin. Tam yapıdan yalnızca birkaç bileşeni çıkarmanız gerektiğinde kullanın.

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

## Özel bir tema oluşturun

Kendi temanızı oluşturmak için renk değerlerinizi bir `[data-theme="your-theme-name"]` seçici içinde sağlanan CSS değişkenlerine atamanız yeterlidir.

### 1. The "Automatic" Approach (Minimal)

Bu versiyonda `--color-on-*` değişkenlerini atladık. Frutjam, eksik değişkenleri tespit eder ve bileşenin erişilebilir ve okunabilir kalmasını sağlamak için genellikle çok açık veya çok koyu bir `OKLCH` değeri arasında geçiş yaparak en uygun metin rengini hesaplar.

```css
@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)

Bu versiyonda `--color-on-*` değişkenlerini açıkça tanımlıyoruz. Bu, belirli marka yönergeleriniz olduğunda (saf beyaz yerine renkli kırık beyaz kullanmak gibi) veya erişilebilirlik kontrollerini geçmeye devam eden düşük kontrastlı, sofistike bir görünüm gibi belirli bir "hava" elde etmek istediğinizde idealdir.

```css
@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);
    }
}
```

Özel temanızı HTML'nizdeki projenize uygulamak için bir HTML öğesine `data-theme='your-theme-name'` kullanın.

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

Temalar iç içe yerleştirilebilir; HTML'nizin herhangi bir bölümüne, o alanın genel temasını geçersiz kılacak şekilde belirli bir tema uygulayabilirsiniz.

```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>
```

## Ek Okuma

- [Mevcut yerleşik temalar](/tr/docs/themes) — Snowberry, Darkberry ve dahil olan tüm temalara göz atın
- [Renk sistemi referansı](/tr/docs/colors) — CSS renk değişkenlerinin tam listesi ve bunların bileşenlerle nasıl eşleştiği