自定义指南

AstroGlass 使用 Tailwind CSS v4 进行样式设计，并通过 @tailwindcss/vite 插件实现。这里没有单独的 tailwind.config.mjs 文件 — 所有的自定义配置都在 CSS 中完成。

样式概览

全局样式和 CSS 变量定义在 src/styles/global.css 中。该文件负责处理：

• 基础层重置 (Base layer resets)
• 自定义字体 (Inter & JetBrains Mono)
• 用于主题控制的 CSS 变量 (HSL 颜色值)

特定主题的覆盖样式位于 src/styles/_themes.css。

色彩系统

本项目采用基于 CSS 变量的色彩系统。颜色被定义为 HSL 值（不带 hsl() 包装），这使得 Tailwind 的透明度修饰符语法能够正常工作。

/* src/styles/global.css */
:root {
  --p: 260 80% 60%;   /* 主色 (Primary) */
  --s: 310 80% 60%;   /* 辅色 (Secondary) */
  --a: 190 90% 60%;   /* 点缀色 (Accent) */
  --b1: 220 20% 10%;  /* 基础 1 (背景) */
  --b2: 220 18% 14%;  /* 基础 2 (表面) */
  --bc: 220 20% 90%;  /* 基础内容 (文本) */
  --er: 0 80% 60%;    /* 错误 (Error) */
  --su: 150 80% 50%;  /* 成功 (Success) */
}

组件通过 Tailwind 实用类或 hsl() 来消费这些变量：

<div class="bg-[hsl(var(--p))] text-[hsl(var(--bc))]">
  Primary Background with Base Content Text
</div>

添加自定义字体

1. 将字体文件放置在 public/fonts/ 目录中，或者在 global.css 中从 Google Fonts 导入。
2. 在 src/styles/global.css 中定义 @font-face 规则。
3. 根据需要更新字体 CSS 变量或 Tailwind 实用类。

组件自定义

每个主题都有其自己的组件变体（例如，HeroLiquid.astro，HeroGlass.astro）。要自定义特定部分：

1. 导航到 src/components/sections/{section}/（例如，hero/）。
2. 直接编辑特定于主题的文件（例如，HeroGlass.astro）。
3. 特定于组件的 CSS 位于 src/styles/components/{section}/ 中。