我想创建一个应用程序(类似于社交网络),让用户注册并输入一系列个人资料信息,然后用户可以选择一个主题(从一组预定义的主题中)来向其他查看个人资料的用户显示这些信息。这与Shopify的店面主题非常相似。我应该如何着手尝试设计一个解决方案呢?为一个非常高层次的模糊问题提前道歉。我知道如何设置主题和/或颜色等,在我写代码的时候(或者可能在构建步骤),但我被困在甚至试图推理如何在产品内部做到这一点。
hfsqlsce1#
您可以使用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>
如果主题className来自API响应,您应该将其安全列表,否则tailwind将不会生成它们,请参阅tailwind文档了解更多详细信息
1条答案
按热度按时间hfsqlsce1#
您可以使用tw-colors来创建预定义的主题
然后在卡片容器上应用主题
如果主题className来自API响应,您应该将其安全列表,否则tailwind将不会生成它们,请参阅tailwind文档了解更多详细信息