Tailwind CSS

Raypx 使用 Tailwind CSS 4 配合 @tailwindcss/vite 插件。样式配置采用 CSS 原生方式，不再需要独立的 tailwind.config.js 文件。

@tailwindcss/vite 插件

在 vite.config.ts 中，Tailwind CSS 作为 Vite 插件集成：

import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [
    tailwindcss(),
    // ...
  ],
})

同时，Biome 的 CSS 解析器也启用了 Tailwind 指令支持：

{
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  }
}

全局样式文件

Raypx 的样式入口为 src/styles/index.css，它仅导入 UI 包的全局样式：

@import "@raypx/ui/styles/globals.css";

所有主题变量和基础样式定义在 packages/ui/src/styles/globals.css 中。这种设计将 UI 样式与主应用解耦，方便在 Monorepo 中共享。

CSS 中的主题配置

Tailwind CSS 4 使用 @theme 指令在 CSS 文件中直接定义主题，取代了传统的 JS 配置文件。

基础导入

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/inter";
@import "@fontsource-variable/manrope";
@plugin "@tailwindcss/typography";

自定义变体

@custom-variant dark (&:is(.dark *));

暗色模式通过 .dark 类名控制，而非媒体查询。主题切换由 next-themes 库管理。

源码扫描路径

@source "../../../packages/**/*.{ts,tsx}";
@source "../../../src/**/*.{ts,tsx}";

Tailwind CSS 4 需要明确指定扫描路径以发现类名。此处配置了 monorepo 中所有包和主应用的源码目录。

主题变量

通过 @theme inline 定义设计令牌：

@theme inline {
  --font-sans: "Inter Variable", sans-serif;
  --font-heading: "Manrope Variable", sans-serif;
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... 更多变量 */
  --radius: 0.625rem;
}

shadcn/ui 的 CSS 变量（如 --primary、--background）通过 @theme inline 桥接到 Tailwind 的设计系统中，使你可以使用 bg-primary、text-foreground 等 Tailwind 类名。

暗色/亮色模式

亮色和暗色模式的颜色通过 CSS 变量在 :root 和 .dark 选择器中定义：

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ... 亮色模式变量 */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... 暗色模式变量 */
}

颜色使用 OKLCH 色彩空间定义，提供更均匀的视觉感知。默认主题通过 VITE_PUBLIC_DEFAULT_THEME 环境变量控制，默认为 dark。

排版插件

项目集成了 @tailwindcss/typography 插件，为 Markdown 内容和文档页面提供美观的排版样式：

@plugin "@tailwindcss/typography";

使用 prose 类即可应用排版样式：

<article class="prose dark:prose-invert">
  <!-- Markdown 渲染内容 -->
</article>

字体

Raypx 使用两个 Google 字体：

用途	字体	CSS 变量
正文	Inter Variable	`--font-sans`
标题	Manrope Variable	`--font-heading`

字体通过 @fontsource-variable 包导入，在构建时自动内联字体文件，无需外部网络请求。

Tailwind CSS

On this page