用途:为复古 8-bit 风格组件组织 CSS,规范像素字体、像素化图片、暗色模式颜色与响应式像素尺寸。
必要用法:所有 8-bit 组件必须导入复古样式表 import "@/components/ui/8bit/styles/retro.css";。字体使用 "Press Start 2P",可在 .retro 类中定义 font-family、line-height 与 letter-spacing,并通过 className="retro" 或 font="retro" 属性应用。像素图片加 .pixelated 类,设置 image-rendering: pixelated 与 crisp-edges。暗色模式采用语义色加 dark: 前缀,如 dark:border-ring、dark:bg-ring。响应式像素尺寸使用固定值,如 size-1.5(角像素)、h-1.5 w-3(阴影段)、border-y-6(卡片边框),移动端可用 h-[5px] md:h-1.5。
组织方式:复古样式集中放在 components/ui/8bit/styles/retro.css,并可通过 @import 引入像素字体;组件级样式优先用 Tailwind 工具类,配合 cn 组合(如 rounded-none、active:translate-y-1)。原则包括必须导入 retro.css、统一固定像素值、使用 rounded-none 去除圆角、Tailwind 优先。参考文件为 retro.css 与 button.tsx。适用创建或修改复古风格组件及其 CSS 的场景;未提供更多限制说明。