样式与 Tailwind ​

Tailwind 配置 ​

• tailwind.config.js 与 .vitepress/theme/styles/*
• 预设、颜色、断点与容器宽度

自定义样式层 ​

• preflight.css 重置
• tailwind.css 引入 utilities
• custom.css 自定义组件样式

主题内覆盖策略（与 VitePress 配合） ​

• 优先使用 Tailwind 表达（@layer components + @apply），必要时提高选择器优先级；仅在极端情况下对特定规则加 !important。
• 面包屑示例（覆盖 .vp-doc li + li { margin-top: 8px; }）：
  css

  @layer components {
    .vp-doc .breadcrumb-nav ol { @apply list-none pl-0 m-0 flex items-center space-x-4; }
    .vp-doc .breadcrumb-nav ol li + li { margin-top: 0 !important; }
  }

SVG 图标的主题色 ​

• 在 allIcon.vue 中确保路径 fill: 'currentColor'，并使用主题变量控制颜色：
  css

  .vp-icon { color: var(--vp-c-text-2); }
  .vp-icon:hover { color: var(--vp-c-brand-1); }