夜雨聆风text-2xl: 标题 font-size:24pxtext-xl：副标题 font-size:20pxtext-base：正文 font-size: 16pxtext-sm：辅助文字 font-size: 14pxtext-xs：备注 font-size: 12px一句话区分 margin /padding
- margin：往外挤，块和块的距离 → 大数值 (16/24/32)
- padding：往里缩，内容和边框距离 → 小数值 (4/8/12)
p-2：文字间距：padding:8pxmt-4：模块间距 间距：margin:16px;m-8：间距：margin:32px;- 大模块和大模块之间：24px、32px（比如头部、列表区、底部三个大块中间空隙）
- 页面边距（内容离屏幕左右）：16px / 24px
rounded-full: 胶囊 border-radius:9999rounded-2xl： 卡片 border-raduis:20pxrounded-lg：按钮 border-raduis: 8pxbg-white: bg-[#f5f5fd]bg-[rgba(242,245,243)] bg-[linear-gradient(to_right,#235fe5,#5d90f6)]text-inherittext-blacktext-green-50- 步骤 1：选择中性色作为文本和背景色。
- 步骤 2：选择一种主色，然后选择一种不太显眼的颜色作为辅助色。
- 步骤 3：选择一种强调色，用于高亮显示、勾选标记、方框、链接等。
60% 主导色（背景/大面积底色）：
30% 辅助色（文字/卡片/边框）：
10% 点缀色/品牌色（按钮/高亮图标）：
避坑指南：只要你的页面有 90% 的面积是黑、白、灰，那你的页面就绝对不可能难看。剩下的 10% 无论你用蓝色、绿色还是紫色，它都会非常精致
一、 宽度的金科玉律：由外到内（外层控宽，内层自适应）
二、 高度的金科玉律：由内到外（内层撑开，外层绝不写死）
除非：
1.使用css里面的变量：
/* 全局存变量 */:root {--theme-blue: #007AFF;--text-black: #1D1D1F;}/* 任意标签调用变量 */.box {background: var(--theme-blue);color: var(--text-black);}
/* 全局存变量 */.dark {--bg-page: #f0f8f0;--bg-card: #f8fff8;--color-main: #229955;--text-title: #113311;--text-desc: #447744;--border-line: #c8e6c8;}/* 任意标签调用变量 */.light {--bg-page: #f0f8f0;--bg-card: #f8fff8;--color-main: #229955;--text-title: #113311;--text-desc: #447744;--border-line: #c8e6c8;}
class='light'className='light'
style={tw`text-[${currentTheme.iconColor}]`}currentTheme= {/*APP全局颜色变量 */simply: {primary: "blue",gradientStart: "#235fe5",gradientMiddle: "#5d90f6",secondStart: "#6d9ef7",gradientEnd: "#ffffff",bg: "#EFF6FF",bgActive: "#DBEAFE",text: "#2563EB",textDark: "#1D4ED8",iconColor: "#2d68e8",badgeColor: "#3a73ee",},danger: {primary: "red",gradientStart: "#EF4444",gradientMiddle: "#F87171",secondStart: "#FA8B8B",gradientEnd: "#ffffff",bg: "#FEF2F2",bgActive: "#FEE2E2",text: "#EF4444",textDark: "#DC2626",iconColor: "#DC2626",badgeColor: "#EF4444",};
你必须遵守：1. 字体：12/14/16/20/242. 间距：4倍数3. 圆角：按钮8卡片20胶囊99994. 页面：padding 165. 禁止：自定义颜色随机字体随机间距6. 所有颜色来自Theme7. 使用zustand管理全局状态