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

# Configuration

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

## Options du plugin

Personnalisez Frutjam en passant des options dans le bloc `@plugin` :

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

| Valeur                                        | Quand utiliser                                                                                                             |
| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `:root`                                       | Défaut. Les jetons sont disponibles dans le monde entier sur toute la page.                                                |
| `:host`                                       | Shadow 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
@plugin "frutjam" {
  root: :root;
}
```

#### Shadow DOM / Composants Web

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

### 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
@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
@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
@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
@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
<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
<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

- [Thèmes intégrés disponibles](/fr/docs/themes) — parcourez Snowberry, Darkberry et tous les thèmes inclus
- [Référence du système de couleurs](/fr/docs/colors) — liste complète des variables de couleur CSS et comment elles correspondent aux composants