主题设置
主题是设计用户界面 (UI) 的关键元素。它使您能够在整个应用程序中应用一致的美感，从而增强用户体验并保持视觉一致性。
Tailwind CSS
Resolid React UI 使用 Tailwind CSS v4
@theme
Tailwind CSS V4 采用 CSS 优先配置方法，现在您可以在 @theme 指令中使用 CSS 变量自定义主题：
@import "tailwindcss";
@import "@resolid/react-ui/tailwindcss";
@theme {
--font-sans: "Public Sans", sans-serif;
--breakpoint-3xl: 1920px;
--color-green-50: #effdf5;
--color-green-100: #d9fbe8;
--color-green-200: #b3f5d1;
--color-green-300: #75edae;
--color-green-400: #00dc82;
--color-green-500: #00c16a;
--color-green-600: #00a155;
--color-green-700: #007f45;
--color-green-800: #016538;
--color-green-900: #0a5331;
}@theme 指令告诉 Tailwind，根据这些变量使新的实用程序和变体可用。
@source
如果你想在其他未自动检测的文件中检测 classes，则可以使用 @source 指令添加明确的内容 Glob 模式。
@import "tailwindcss";
@import "@resolid/react-ui/tailwindcss";
@source "../content";@plugin
你可以使用 @plugin 指令导入 Tailwind CSS 插件。
@import "tailwindcss";
@import "@resolid/react-ui/tailwindcss";
@plugin "@tailwindcss/typography";