复古CSS架构Skill retro-css-architecture

---

name: retro-css-architecture description: 使用自定义属性、像素字体和响应式像素艺术组织8-bit CSS。在创建或修改复古风格组件及其CSS时应用。

复古CSS架构

使用自定义属性、像素字体和响应模式为8-bit组件组织CSS。

必需导入

所有8-bit组件必须导入复古样式表：

import "@/components/ui/8bit/styles/retro.css";

像素字体

使用“Press Start 2P”以实现真实的8-bit排版：

.retro {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

通过类或字体变体应用：

<Button className="retro">开始游戏</Button>

// 或通过字体属性
<Button font="retro">开始游戏</Button>

像素化图像

对于清晰的像素艺术图像：

.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

<Image src="/pixel-art.png" className="pixelated" />

暗模式颜色

使用语义颜色名称与暗模式变体：

<div className="border-foreground dark:border-ring" />
<div className="bg-foreground dark:bg-ring" />

响应式像素尺寸

使用一致的像素值以保持复古感：

{/* 标准像素尺寸 */}
<div className="size-1.5" />      {/* 角落像素 */}
<div className="h-1.5 w-3" />     {/* 阴影段 */}
<div className="border-y-6" />     {/* 卡片边框 */}

{/* 移动设备考虑 */}
<div className="h-[5px] md:h-1.5" />

CSS组织

将复古特定样式保留在 components/ui/8bit/styles/retro.css 中：

/* 导入像素字体 */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* 字体类 */
.retro {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* 图像处理 */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

组件级CSS

使用Tailwind工具进行组件特定样式：

<div
  className={cn(
    "relative border-y-6 border-foreground dark:border-ring",
    "rounded-none active:translate-y-1 transition-transform",
    className
  )}
/>

关键原则

1. 导入 retro.css - 对所有8-bit组件是必需的
2. 像素字体 - 使用“Press Start 2P”以保持真实外观
3. 像素化图像 - 将 image-rendering: pixelated 应用于精灵
4. 一致尺寸 - 使用固定像素值 (1.5, 3, 6px)
5. 暗模式 - 使用带有 dark: 前缀的语义颜色
6. rounded-none - 移除所有边框半径以保持复古感
7. Tailwind优先 - 在使用自定义CSS之前使用工具类

参考文件

• components/ui/8bit/styles/retro.css - 全局复古样式
• components/ui/8bit/button.tsx - CSS类使用示例