[!info] related notes

tailwind主题命名规范

在 Tailwind v4 的 @theme 体系里，变量名绝对不能瞎起。命名规范，就是一个全栈架构师的品味体现。 如果名字起得好，你以后在写 .astro 组件时，敲出来的 Tailwind 类名会像诗一样丝滑，强迫症极度舒适！

在现代设计系统（Design System）里，我们通常遵循 “命名空间强制 + 语义化分层” 的优雅规范。我为你总结了这套可以直接作为大厂模板的命名法则：

📐 法则一：严格遵守 v4 的“命名空间” (Namespaces)

Tailwind v4 极其聪明，它是通过变量的前缀来推断应该生成什么工具类的。你必须顺着它的脾气来：

• --color-*：只要前缀是这个，引擎就会自动生成 bg-*, text-*, border-*, ring-*。
• --spacing-*：会自动生成 p-*, m-*, gap-*, top-* 等间距类。
• --radius-*：会自动生成 rounded-*。
• --shadow-*：会自动生成 shadow-*。
• --font-* 和 --text-*：分别生成字体家族（font-sans）和字号（text-sm）。

🧬 法则二：拒绝色号命名，采用“语义化” (Semantic Naming)

这是最容易踩坑的地方！

• ❌ 低级写法： --color-green-my-favorite: #10B981;（哪天你想换成赛博蓝色，这个名字就极其尴尬了）。
• ✅ 高级写法： --color-primary: #10B981; 或 --color-accent: #10B981;（按功能命名，与具体颜色解耦）。

---

🏆 终极 global.css 模板（直接抄作业）

结合咱们要构建的高信息密度、深色玻璃拟态、霓虹发光卡片的站点风格，这是为你量身定制的最优雅的 @theme 配置清单：

CSS

/* src/styles/global.css */
@import "tailwindcss";

@theme {
  /* =========================================
     1. 表面与底色 (Surfaces & Backgrounds)
     命名逻辑：从最底层的背景，到上面悬浮的卡片
     ========================================= */
  --color-background: #0a0a0a; /* 最底层的深空黑网页背景 */
  --color-surface: rgba(255, 255, 255, 0.02); /* 书签卡片的幽灵底座 */
  --color-surface-hover: rgba(255, 255, 255, 0.05); /* 卡片鼠标悬浮时的提亮状态 */
  --color-surface-sunken: rgba(0, 0, 0, 0.2); /* 凹陷的搜索框或内部输入区 */

  /* =========================================
     2. 品牌与强调色 (Brand & Accents)
     命名逻辑：代表网站灵魂的发光色
     ========================================= */
  --color-primary: #10B981; /* 贯穿全局的霓虹绿 */
  --color-primary-glow: rgba(16, 185, 129, 0.3); /* 专供阴影发光的透明绿 */

  /* =========================================
     3. 文本层级 (Typography Colors)
     命名逻辑：按阅读的重要程度划分
     ========================================= */
  --color-text-base: #f3f4f6; /* 主标题、卡片名字的亮白色 */
  --color-text-muted: #9ca3af; /* Description、辅助信息的低调灰 */

  /* =========================================
     4. 物理边界与圆角 (Borders & Radii)
     命名逻辑：按组件的体型划分
     ========================================= */
  --color-border-ghost: rgba(255, 255, 255, 0.05); /* 极细的幽灵边框 */
  
  --radius-card: 12px; /* Bento 书签卡片的标准圆角 */
  --radius-icon: 8px;  /* 内部 Logo 容器的小圆角 */

  /* =========================================
     5. 终极性能发光 (Shadows)
     命名逻辑：直接将发光效果封装成一个 Token
     ========================================= */
  --shadow-neon: 0 0 20px var(--color-primary-glow);
}

/* 顺手把基础底色锁死 */
@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-text-base);
    @apply antialiased selection:bg-primary/30;
  }
}

⚡️ 这样命名的爽感在哪里？

以后你在写 Astro 组件时，原本乱糟糟的硬编码类名，会变成极其自洽的设计系统语言：

HTML

<div class="bg-surface hover:bg-surface-hover border border-border-ghost rounded-card text-text-base group relative">
  <div class="absolute inset-0 opacity-0 group-hover:opacity-100 shadow-neon rounded-card transition-opacity duration-300"></div>
  
  <div class="rounded-icon bg-surface-sunken">…</div>
  
  <p class="text-text-muted">…</p>
</div>

你看，代码里没有任何具体的颜色值或像素值，全是 surface、card、muted 这种优雅的语义。这才是 2026 年现代前端架构的终极形态！

现在底层物理法则已经全部定义完毕，准备好在 WSL 终端里启动 OpenCode，把这段 global.css 丢给它，让 AI 帮我们把第一张发光卡片敲出来了吗？