Vue + Tailwind: Themebare Profilseite

Question

Ich möchte eine Anwendung erstellen (ähnlich einem sozialen Netzwerk), mit der sich Benutzer anmelden und eine Reihe von Profilinformationen eingeben können. Anschließend kann der Benutzer ein Thema (aus einer Reihe vordefinierter Themen) auswählen, um diese Informationen anderen Benutzern anzuzeigen, die das Profil anzeigen.

Dies ist dem Storefront-Theme von Shopify sehr ähnlich.

Wie sollte ich versuchen, hierfür eine Lösung zu entwickeln?

Entschuldigung im Voraus für eine sehr fortgeschrittene, vage Frage.

Ich weiß, wie man das Thema und/oder die Farben usw. festlegt, während man Code schreibt (oder vielleicht während des Build-Schritts), aber ich versuche sogar darüber nachzudenken, wie man das im Produkt macht.

Answer 1

您可以使用tw-colors来创建预定义主题

   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',
            },
         })
      ],
   };

然后将主题应用到卡片容器上

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

如果主题类名来自 API 响应，您应该将它们列入安全列表，否则 tailwind 将不会生成它们，请参阅 tailwind 文档了解更多详细信息