Vue + Tailwind：可主题化的个人资料页面
P粉155710425
2023-09-03 14:50:24
<p>我想创建一个应用程序（类似于社交网络），让用户注册并输入一堆个人资料信息。此后，用户可以选择一个主题（从一组预定义主题中），以便向查看个人资料的其他用户显示此信息。</p>
<p>这与 Shopify 的店面主题非常相似。</p>
<p>我应该如何尝试为此设计解决方案？</p>
<p>对于一个非常高级的模糊问题提前表示歉意。</p>
<p>我知道如何在编写代码时（或者可能在构建步骤期间）设置主题和/或颜色等，但我什至试图推理如何在产品内部执行此操作。</ p>
您可以使用tw-colors来创建预定义主题 p>
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', }, }) ], };然后将主题应用到卡片容器上
如果主题类名来自 API 响应，您应该将它们列入安全列表，否则 tailwind 将不会生成它们，请参阅 tailwind 文档了解更多详细信息