Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Configuration

Configure the Frutjam CSS-only Tailwind CSS plugin. Set default themes, define custom color tokens, toggle the prefix system - zero JavaScript required. WCAG accessible defaults, works with Django, HTMX, Laravel, and any framework.

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 
1
2
@import "tailwindcss";
@plugin "frutjam";

Opcje wtyczki

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

css 
1
2
3
4
5
6
7
8
9
@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 
1
2
3
@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 
1
2
3
4
@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 
1
2
@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 
1
2
3
4
@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 
1
2
3
@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ć
:rootDomyślny. Tokeny są dostępne globalnie na całej stronie.
:hostShadow 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 
1
2
3
@plugin "frutjam" {
  root: :root;
}

Shadow DOM / komponenty sieciowe

css 
1
2
3
@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 
1
2
3
4
5
@plugin "frutjam" {
  prefix: fj;
  reset: false;
  root: #my-app;
}
html 
1
2
3
4
<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 
1
2
3
@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 
1
2
3
@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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@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 
1
2
3
<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 
1
2
3
4
5
6
7
8
<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