Vue + Tailwind : page de profil thématique

Question

Je souhaite créer une application (similaire à un réseau social) qui permet aux utilisateurs de s'inscrire et de saisir de nombreuses informations de profil. Par la suite, l'utilisateur peut sélectionner un thème (parmi un ensemble de thèmes prédéfinis) pour afficher ces informations aux autres utilisateurs consultant le profil.

Ceci est très similaire au thème de la vitrine de Shopify.

Comment dois-je essayer de concevoir une solution à ce problème ?

Désolé d'avance pour une question vague très avancée.

Je sais comment définir le thème et/ou les couleurs, etc. lors de l'écriture du code (ou peut-être pendant l'étape de construction), mais j'essaie même de raisonner sur la façon de procéder dans le produit.

Answer 1

Vous pouvez utiliser tw-colors pour créer des thèmes prédéfinis

   const { createThemes } = require('tw-colors');

   module.exports = {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [
         createThemes({
            banana: { 
               'primary': 'steelblue',
               'secondary': 'darkblue',
               'brand': '#F3F3F3',
            },
            halloween: { 
               'primary': 'turquoise',
               'secondary': 'tomato',
               'brand': '#4A4A4A',
            },
            darkula: { 
               'primary': '#2A9D8F',
               'secondary': '#E9C46A',
               'brand': '#264653',
            },
         })
      ],
   };

Ensuite, appliquez le thème au conteneur de cartes

<div class='theme-darkcula'>
    <h2 class='text-primary'>Username</h2>
    <p class='text-secondary'>...</p>
</div>

<div class='theme-halloween'>
    <h2 class='text-primary'>Username</h2>
    <p class='text-secondary'>...</p>
</div>

Si les noms de classes de sujets proviennent de réponses API, vous devez les mettre en liste sécurisée, sinon tailwind ne les générera pas, voir documentation tailwindpour plus de détails