Documents
Documentation Frutjam — installation, configuration, thème, couleurs et typographie. Tailwind CSS v4 uniquement CSS, zéro JavaScript, WCAG AA accessible. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Ces documents couvrent tout ce dont vous avez besoin pour passer d'un nouveau projet Tailwind CSS v4 à une interface utilisateur entièrement thématique et accessible. Commencez par Installation (deux lignes de CSS), puis explorez le fonctionnement du système de thèmes à l'aide de variables CSS et d'un seul attribut data-theme. Le système de couleurs utilise des jetons sémantiques OKLCH qui répondent automatiquement aux rapports de contraste WCAG AA sans qu'une vérification manuelle des couleurs ne soit nécessaire. Les options de configuration vous permettent de définir la portée des jetons, d'ajouter un préfixe pour éviter les conflits ou de sélectionner uniquement les composants dont vous avez besoin pour que votre sortie CSS reste légère.
Couleurs
Le système de couleurs de Frutjam utilise des jetons CSS sémantiques conçus pour répondre aux rapports de contraste WCAG AA dès le départ. Pas de JavaScript, compatible avec le mode sombre, compatible avec Tailwind CSS v4. Fonctionne avec Django, HTMX, Laravel et toute pile CSS uniquement.
Aperçu
Frutjam est une bibliothèque d'interface utilisateur Tailwind CSS v4 gratuite uniquement CSS. Zéro JavaScript, WCAG AA/AAA accessible, indépendant du framework. Créez des interfaces modernes avec des composants sémantiques qui fonctionnent avec Django, HTMX, Laravel, React et n'importe quelle pile.
Thèmes
Le système de thèmes CSS uniquement de Frutjam utilise des variables CSS et un seul attribut de données. Changez de thème clair, sombre et personnalisé sans JavaScript. Les jetons de couleur WCAG AA intégrés fonctionnent avec Django, HTMX, Laravel et tout projet Tailwind CSS v4.
Installation
Installez Frutjam, la bibliothèque d'interface utilisateur CSS Tailwind uniquement CSS, en quelques minutes. Deux importations, zéro JavaScript, composants accessibles aux WCAG prêts à l'emploi. Fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.
Configuration
Configurez le plugin Tailwind CSS Frutjam CSS uniquement. Définissez des thèmes par défaut, définissez des jetons de couleur personnalisés, activez le système de préfixes - aucun JavaScript requis. Paramètres par défaut accessibles WCAG, fonctionne avec Django, HTMX, Laravel et n'importe quel framework.
Typographie
Le système de typographie CSS uniquement de Frutjam. Mise à l'échelle sémantique du texte HTMX avec Tailwind CSS v4, accessible aux WCAG, aucun JavaScript requis. Fonctionne avec Django, HTMX, Laravel, React et n'importe quel framework.
Par où commencer
Nouveau sur Frutjam? Suivez ce chemin pour passer de zéro à un projet Tailwind CSS v4 entièrement thématique et accessible.
- 1Installation
Installez le package npm et ajoutez deux lignes à votre CSS. Pas de configuration JavaScript, pas de plugins PostCSS.
- 2Aperçu
Comprenez comment Frutjam fonctionne avec les utilitaires CSS Tailwind, les classes de composants sémantiques et les jetons de couleur WCAG AA.
- 3Thèmes
Appliquez un thème intégré ou créez le vôtre avec des variables CSS et un seul attribut
data-theme. - 4Colors
Découvrez comment fonctionnent les jetons de couleur sémantiques et comment chaque paire
on-{color}garantit automatiquement le contraste WCAG AA. - 5Configuration
Définissez un préfixe, étendez les jetons à un élément racine, sélectionnez des composants ou intégrez-les à un autre framework CSS.
Questions fréquemment posées
Frutjam nécessite-t-il Tailwind CSS v4 ?
Oui — Frutjam est conçu pour Tailwind CSS v4 et utilise la directive @plugin introduite dans la v4. Il n'est pas compatible avec Tailwind CSS v3. Si vous êtes toujours sur la v3, effectuez d'abord la mise à niveau vers la v4 à l'aide du guide de migration officiel de Tailwind.
Frutjam est-il gratuit et open source ?
Oui, la bibliothèque de composants de base Frutjam est gratuite et open source (sous licence MIT). Les forfaits Pro et Team ajoutent des blocs d'interface utilisateur premium, des modèles et des requêtes Cherry MCP illimitées pour l'intégration de l'éditeur IA.