Passer au contenu principal
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.

Configurez le plugin Tailwind CSS Frutjam uniquement CSS pour qu'il corresponde à votre projet. Définissez des thèmes, définissez des jetons de couleur personnalisés, activez le système de préfixes et sélectionnez les composants – aucun JavaScript requis. Paramètres par défaut accessibles WCAG AA. Fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.

Configuration de base

Ajoutez Frutjam à votre fichier CSS en utilisant la directive @plugin. Aucune option n'est requise : tout fonctionne immédiatement.

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

Options du plugin

Personnalisez Frutjam en passant des options dans le bloc @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;
}

préfixe

Ajoute un préfixe à tous les noms de classes Frutjam pour éviter les conflits avec votre propre CSS.

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

Le comportement du préfixe dépend de l'utilisation ou non de l'option prefix() de Tailwind :

Préfixe Frutjam uniquement

Les noms de classe Frutjam sont préfixés. Utilisez-les directement en HTML.

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

Préfixe Tailwind uniquement

Le prefix() de Tailwind fonctionne comme une variante — tous les utilitaires (y compris celui de Frutjam) nécessitent le préfixe comme sélecteur de variante en HTML.

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

Les deux préfixes

Frutjam renomme ses classes (par exemple fj-btn), et le préfixe de variante de Tailwind est requis en haut.

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

réinitialiser

Contrôle si Frutjam injecte des réinitialisations d'éléments de base (styles de redémarrage). La valeur par défaut est true.

Lorsque true, Frutjam réinitialise le modèle de boîte, la typographie, les listes, les médias et les éléments de formulaire, de la même manière que le contrôle en amont de Tailwind. Lorsque false, seuls les jetons de variables CSS sont injectés ; les styles d’éléments bruts sont entièrement ignorés.

Définissez sur false lorsque vous utilisez déjà un autre framework CSS (Bootstrap, Bulma, etc.) ou votre propre réinitialisation, pour éviter les conflits sur des éléments comme *, html, body, h1–h6 et button.

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

racine

Le sélecteur CSS où Frutjam enregistre ses variables de jeton de conception (--color-primary, --color-base, etc.). La valeur par défaut est :root.

Il existe trois valeurs utiles :

ValeurQuand utiliser
:rootDéfaut. Les jetons sont disponibles dans le monde entier sur toute la page.
:hostShadow DOM / Composants Web. Range les jetons à l'intérieur du composant afin qu'ils ne s'échappent pas.
N'importe quel sélecteur (par exemple #app)Étend les jetons à un élément wrapper spécifique. Utile lorsque Frutjam coexiste avec un autre framework sur la même page.

Par défaut : jetons globaux

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

Shadow DOM / Composants Web

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

Portée sur un élément wrapper

Si un autre framework contrôle déjà :root (par exemple, Bootstrap définit ses propres variables --bs-* et couleurs de corps), pointez Frutjam vers un élément conteneur à la place. Cela déplace color, background-color et toutes les variables CSS de :root afin qu'elles ne s'appliquent qu'à l'intérieur de ce wrapper.

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>

inclure

Chargez uniquement des composants spécifiques au lieu de la bibliothèque complète. Utile pour réduire la taille de la production en production.

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

exclure

Chargez tous les composants sauf ceux répertoriés. À utiliser lorsque vous n'avez besoin que de supprimer quelques composants de la version complète.

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

Créer un thème personnalisé

Pour créer votre propre thème, attribuez simplement vos valeurs de couleur aux variables CSS fournies dans un sélecteur [data-theme="your-theme-name"]

1. The "Automatic" Approach (Minimal)

Dans cette version, nous omettons les variables --color-on-*. Frutjam détecte les variables manquantes et calcule la couleur optimale du texte (généralement en alternant entre une valeur OKLCH très claire ou très sombre) pour garantir que le composant reste accessible et lisible.

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)

Dans cette version, nous définissons explicitement les variables --color-on-*. C'est idéal lorsque vous avez des directives de marque spécifiques (comme utiliser un blanc cassé teinté au lieu d'un blanc pur) ou lorsque vous souhaitez obtenir une « ambiance » spécifique, comme un look sophistiqué à faible contraste qui passe toujours les contrôles d'accessibilité.

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

Pour appliquer votre thème personnalisé à votre projet dans votre HTML, utilisez data-theme="your-theme-name" à un élément HTML.

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

Les thèmes peuvent être imbriqués : vous pouvez appliquer un thème spécifique à n'importe quelle section de votre code HTML, en remplaçant le thème global de cette zone.

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>

Lectures complémentaires