Charger des configuration Tailwind récupérer de ma BDD

Hello,

Je pense que le plus simple et le plus propre serait d'importer dynamiquement les classes utilisateur dans ton html avec ton moteur de template. Par exemple :

<div class = `${user.backgroundColor}`> </div>

De faire ça me fait perdre l'utilitée de tailwind car pour un background comme ça ça peut encore se faire pour pour faire qu'il change la couleur primaire c'est plus la même, mon but serait de faire que l'utilisateur peut choisir ses couleurs tout en restant dans mon design tailwind.
Pour cela qu'il faudrait recompiler le fichier de config de tailwind en css depuis des données obtenues en BDD

Recompiler tailwind pour chaque utilisateur c'est lourd et peu recommandé.. L'approche que j'indiquais se prête très bien à Tailwind, il faut par contre en effet veiller à ce que les classes appelées aient été buildées..

Ce dont j'ai "peur" c'est que dans mon code j'ai de partout

<div class = `${user.backgroundColor ?? 'bg-primary'}`> </div>

et encore car il faudrait que backgroundColor stock directement bg-[#50d71e] par exemple

Ce qui est largement faisaible mais je sais pas si c'est moi ou oui le code peut vite s'allourdir à lire, car je ne voit pas dans ce cas comment faire une mini fonction qui proprement le ferais.
Ou peut-être une mini fonction comme ceci ?

function userClassStyled(userStyledAttribute: string, tailwindClass: string): string
{
    const user = getUser();

    return user.userStyledAttribute ?? tailwindClass;
}

Sinon j'ai vus la possibilitée que dans le app.tsx ajouter un useEffet() avec dedans root.style.setProperty() pour définir mes variables CSS et que mon utilise ses variables CSS, qu'en pensez-vous ?

Pour le useEffect() je ne sais pas, je n'ai jamais utilisé React... ^^

Sinon, il y a beaucoup de variables qui peuvent changer d'un utilisateur à l'autre ?

Hello :)

Alors si par configuration tu parles de classes tailwinds dynamiques, du coté de la base de données il faudrait mettre une string qui regroupe les class voulues par éléments, ensuite pour ton élément tu peux faire

<div id="dashboard" class="{user.dashboard_class ?? default_class}"></div>
<div id="article" class="{user.article_class ?? default_class}"></div>
<!-- a adapter selon ton view engine --!>

Ensuite point très important, dans ta config tailwind.config.js, tu dois ajouter toutes les class en safelist, ou du moins tous ceux que les utilisateurs ont le droit d'utiliser, parce que Tailwind ne gère pas navitement les class dynamiques, il faut ajouter safeList : [ "*" ] à ton fichier de config pour dire à TW qu'il doit compiler les class même si il ne les trouves pas (et alors si tu n'utilises pas Tailwind.config.js pour extends des class customs... Utilises directement le CDN c'est plus simple

JRcode, le useEffect me permettrait de l'utiliser une fois quand l'utilisateur arrive sur le site.
Et pour la quantitée de classes modifiables je ne suis pas encore certain de ce que je veux mais le plus (et pas que des classes correspondantes à de la couleure) serait le mieux pour ne pas être bloqué à l'avenir.

Popotte, salut,
Pour TW je suis sur la denrière version donc la configuration se fait en css je sais pas si cela change beaucoup de choses.
Egalement c'est peut-être l'heure mais j'avoue ne pas avoir compris la subtilitée de ton ajout,
quand tu parles de " string qui regroupe les class voulues par éléments" ce serait une liste de toutes les classes pouvant être modifiées en BDD ?
Dernière chose ton exemple de code reprends ce dont nous parlions plus haut, peut-être pour cela que je ne comprends pas l'utilitée de lister les classes voulues ?

Okay je vois, mais en effet ça peut devenir très lourd ^^', est-ce que tu sais s'il y a moyen d'avoir 2 fichiers TW, le premier serait celui de base et si un fichier de config TW utilisateur existe alors ça l'ajoute en DOM et donc écrase les données de celui de config ?

Je dois bien avouer cette méthode fait peur pour le stockage haha.

Alors un fichier par défaut pas de soucis, un deuxième pour un utilisateur le soucis c'est que l'utilisateur A et l'utilisateur B n'aura pas la même config ^^'

Pour le stockage, Cloudflare R2 est gratuit et puissant, pas de soucis à ce niveau la, il devient payant dans des cas d'utilisation démesurée, j'ai fais un projet pour une multinationale très intensive et je n'ai pas dépassé le quota gratuit :)

Ok je vois, merci du conseil en tout cas !