Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Konfiguration

Zuletzt aktualisiert:

Konfigurieren Sie das Nur-CSS-Tailwind-CSS-Plugin von Frutjam. Legen Sie Standardthemen fest, definieren Sie benutzerdefinierte Farbtokens, schalten Sie das Präfixsystem um – kein JavaScript erforderlich. WCAG-zugängliche Standardeinstellungen, funktioniert mit Django, HTMX, Laravel und jedem Framework.

Konfigurieren Sie das Frutjam CSS-only Tailwind CSS-Plugin passend zu Ihrem Projekt. Legen Sie Themen fest, definieren Sie benutzerdefinierte Farbtokens, schalten Sie das Präfixsystem um und wählen Sie Komponenten aus – ganz ohne JavaScript. WCAG AA zugängliche Standardeinstellungen. Funktioniert mit Django, HTMX, Laravel, React und jedem Tailwind CSS v4-Projekt.

Grundeinrichtung

Fügen Sie Frutjam mit der Direktive @plugin zu Ihrer CSS-Datei hinzu. Es sind keine Optionen erforderlich – alles funktioniert sofort.

css 
1
2
@import "tailwindcss";
@plugin "frutjam";

Plugin-Optionen

Passen Sie Frutjam an, indem Sie Optionen innerhalb des @plugin-Blocks übergeben:

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

Präfix

Fügt allen Frutjam-Klassennamen ein Präfix hinzu, um Konflikte mit Ihrem eigenen CSS zu vermeiden.

css 
1
2
3
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn fj-btn-primary">Send mail</button>

Wie sich das Präfix verhält, hängt davon ab, ob Sie auch die Option prefix() von Tailwind verwenden:

Nur Frutjam-Präfix

Den Namen der Frutjam-Klassen wird ein Präfix vorangestellt. Verwenden Sie sie direkt in HTML.

css 
1
2
3
4
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn">Button</button>

Nur Rückenwind-Präfix

prefix() von Tailwind funktioniert als Variante – alle Dienstprogramme (einschließlich Frutjams) benötigen das Präfix als Variantenselektor in HTML.

css 
1
2
@import "tailwindcss" prefix(tw);
@plugin "frutjam";
html 
<button class="tw:btn">Button</button>

Beide Präfixe

Frutjam benennt seine Klassen um (z. B. fj-btn), und das Variantenpräfix von Tailwind ist oben erforderlich.

css 
1
2
3
4
@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="tw:fj-btn">Button</button>

zurücksetzen

Steuert, ob Frutjam Basiselement-Resets (Neustartstile) injiziert. Der Standardwert ist true.

Wenn true, setzt Frutjam Boxmodell, Typografie, Listen, Medien und Formularelemente zurück – ähnlich wie Tailwinds Preflight. Bei false werden nur die CSS-Variablen-Tokens eingefügt; Rohelementstile werden vollständig übersprungen.

Legen Sie false fest, wenn Sie bereits ein anderes CSS-Framework (Bootstrap, Bulma usw.) oder Ihren eigenen Reset verwenden, um Konflikte bei Elementen wie *, html, body, h1-h6 und button zu vermeiden.

css 
1
2
3
@plugin "frutjam" {
  reset: false;
}

Wurzel

Der CSS-Selektor, in dem Frutjam seine Design-Token-Variablen registriert (--color-primary, --color-base usw.). Standardmäßig ist :root.

Es gibt drei nützliche Werte:

WertWann zu verwenden
:rootStandard. Token sind global auf der gesamten Seite verfügbar.
:hostShadow DOM / Webkomponenten. Begrenzt Token innerhalb der Komponente, damit sie nicht nach außen dringen.
Beliebiger Selektor (z. B. #app)Bezieht Token auf ein bestimmtes Wrapper-Element. Nützlich, wenn Frutjam mit einem anderen Framework auf derselben Seite koexistiert.

Standard: globale Token

css 
1
2
3
@plugin "frutjam" {
  root: :root;
}

Shadow DOM / Webkomponenten

css 
1
2
3
@plugin "frutjam" {
  root: :host;
}

Auf ein Wrapper-Element beschränkt

Wenn ein anderes Framework bereits :root steuert (z. B. Bootstrap legt seine eigenen --bs-*-Variablen und Körperfarben fest), zeigen Sie Frutjam stattdessen auf ein Containerelement. Dadurch werden color, background-color und alle CSS-Variablen von :root verschoben, sodass sie nur innerhalb dieses Wrappers gelten.

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>

enthalten

Laden Sie nur bestimmte Komponenten statt der gesamten Bibliothek. Nützlich zur Reduzierung der Ausgabegröße in der Produktion.

css 
1
2
3
@plugin "frutjam" {
  include: button, card, alert, badge;
}

ausschließen

Laden Sie alle Komponenten außer den aufgeführten. Verwenden Sie diese Option, wenn Sie nur wenige Komponenten aus dem vollständigen Build entfernen müssen.

css 
1
2
3
@plugin "frutjam" {
  exclude: table, timeline, chat;
}

Erstellen Sie ein benutzerdefiniertes Thema

Um Ihr eigenes Theme zu erstellen, weisen Sie einfach Ihre Farbwerte den bereitgestellten CSS-Variablen innerhalb eines [data-theme="your-theme-name"]-Selektors zu

1. The "Automatic" Approach (Minimal)

In dieser Version lassen wir die Variablen --color-on-* weg. Frutjam erkennt die fehlenden Variablen und berechnet die optimale Textfarbe – normalerweise wechselt es zwischen einem sehr hellen und einem sehr dunklen OKLCH-Wert –, um sicherzustellen, dass die Komponente zugänglich und lesbar bleibt.

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)

In dieser Version definieren wir explizit die Variablen --color-on-*. Dies ist ideal, wenn Sie bestimmte Markenrichtlinien haben (z. B. die Verwendung eines getönten gebrochenen Weiß anstelle von reinem Weiß) oder wenn Sie eine bestimmte „Ausstrahlung“ erreichen möchten, z. B. einen kontrastarmen, eleganten Look, der dennoch die Barrierefreiheitsprüfungen besteht.

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

Um Ihr benutzerdefiniertes Design in Ihrem HTML auf Ihr Projekt anzuwenden, verwenden Sie data-theme="your-theme-name" für ein HTML-Element.

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

Themen können verschachtelt werden – Sie können ein bestimmtes Thema auf einen beliebigen Abschnitt Ihres HTML-Codes anwenden und so das globale Thema für diesen Bereich überschreiben.

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>

Weiterführende Literatur