---
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/pl/docs/configuration
---

# Configuration

Skonfiguruj wtyczkę Tailwind CSS obsługującą wyłącznie Frutjam CSS, aby pasowała do Twojego projektu. Ustawiaj motywy, definiuj niestandardowe tokeny kolorów, przełączaj system przedrostków i wybieraj komponenty — nie jest wymagana żadna obsługa JavaScript. Dostępne ustawienia domyślne WCAG AA. Współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.

## Konfiguracja podstawowa

Dodaj Frutjam do swojego pliku CSS za pomocą dyrektywy `@plugin`. Nie są wymagane żadne opcje — wszystko działa od razu po wyjęciu z pudełka.

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

## Opcje wtyczki

Dostosuj Frutjam, przekazując opcje w bloku `@plugin`:

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

### prefiks

Dodaje przedrostek do wszystkich nazw klas Frutjam, aby uniknąć konfliktów z własnym CSS.

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

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

Zachowanie prefiksu zależy od tego, czy używasz także opcji `prefix()` Tailwinda:

#### Tylko przedrostek Frutjam

Nazwy klas Frutjam są poprzedzone prefiksem. Używaj ich bezpośrednio w kodzie HTML.

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

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

#### Tylko przedrostek wiatru tylnego

`prefix()` Tailwinda działa jako wariant — wszystkie narzędzia (w tym Frutjam) wymagają prefiksu jako selektora wariantu w HTML.

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

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

#### Oba przedrostki

Frutjam zmienia nazwy swoich klas (np. `fj-btn`), a na górze wymagany jest przedrostek wariantu Tailwinda.

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

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

### nastawić

Kontroluje, czy Frutjam wprowadza resetowanie elementów podstawowych (styl ponownego uruchomienia). Domyślnie `true`.

Jeśli `true`, Frutjam resetuje model pudełka, typografię, listy, multimedia i elementy formularzy — podobnie jak w przypadku wstępnej inspekcji Tailwind. Gdy `false`, wstrzykiwane są tylko tokeny zmiennych CSS; style elementów surowych są całkowicie pomijane.

Ustaw na `false`, jeśli używasz już innego frameworka CSS (Bootstrap, Bulma itp.) lub własnego resetu, aby uniknąć konfliktów na elementach takich jak `*`, `html`, `body`, `h1–h6` i `button`.

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

### źródło

Selektor CSS, w którym Frutjam rejestruje zmienne tokenu projektu (`--color-primary`, `--color-base` itp.). Domyślnie jest to `:root`.

Istnieją trzy przydatne wartości:

| Wartość                       | Kiedy używać                                                                                                                  |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `:root`                       | Domyślny. Tokeny są dostępne globalnie na całej stronie.                                                                      |
| `:host`                       | Shadow DOM / komponenty sieciowe. Tokeny zakresów wewnątrz komponentu, aby nie wyciekały.                                     |
| Dowolny selektor (np. `#app`) | Zakres tokenów do określonego elementu otoki. Przydatne, gdy Frutjam współistnieje z innym frameworkiem na tej samej stronie. |

#### Domyślnie — tokeny globalne

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

#### Shadow DOM / komponenty sieciowe

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

#### Zasięg do elementu opakowania

Jeśli inny framework kontroluje już `:root` (np. Bootstrap ustawia własne zmienne `--bs-*` i kolory treści), zamiast tego wskaż Frutjamowi element kontenera. Spowoduje to przeniesienie `color`, `background-color` i wszystkich zmiennych CSS z `:root`, tak aby miały one zastosowanie tylko wewnątrz tego opakowania.

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

### włączać

Załaduj tylko określone komponenty zamiast pełnej biblioteki. Przydatne do zmniejszania wielkości wyjściowej w produkcji.

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

### wykluczać

Załaduj wszystkie komponenty oprócz wymienionych. Użyj, gdy chcesz usunąć tylko kilka komponentów z pełnej kompilacji.

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

## Utwórz niestandardowy motyw

Aby stworzyć własny motyw, po prostu przypisz wartości kolorów do podanych zmiennych CSS w selektorze `[data-theme="nazwa-motywu"]`

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

W tej wersji pomijamy zmienne `--color-on-*`. Frutjam wykrywa brakujące zmienne i oblicza optymalny kolor tekstu — zwykle przełączając pomiędzy bardzo jasną i bardzo ciemną wartością `OKLCH` — aby mieć pewność, że komponent pozostanie dostępny i czytelny.

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

W tej wersji wyraźnie definiujemy zmienne `--color-on-*`. Jest to idealne rozwiązanie, jeśli masz określone wytyczne dotyczące marki (np. użycie przyciemnionego odcienia złamanej bieli zamiast czystej bieli) lub gdy chcesz uzyskać określony „klimat”, np. wyrafinowany wygląd o niskim kontraście, który mimo to przechodzi kontrolę dostępności.

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

Aby zastosować niestandardowy motyw do projektu w kodzie HTML, użyj `data-theme="nazwa-twojego-motywu"` do elementu HTML.

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

Motywy można zagnieżdżać — możesz zastosować konkretny motyw do dowolnej sekcji kodu HTML, zastępując motyw globalny dla tego obszaru.

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

## Dalsze czytanie

- [Dostępne wbudowane motywy](/pl/docs/themes) — przeglądaj Snowberry, Darkberry i wszystkie zawarte motywy
- [Odniesienie do systemu kolorów](/pl/docs/colors) — pełna lista zmiennych kolorów CSS i sposobu ich mapowania na komponenty