You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.9 KiB
2.9 KiB
Tailwind v4 主题配置修复
问题描述
项目使用 Tailwind CSS v4，但 globals.css 中的 @theme 配置使用了错误的语法：
- 使用了
var()引用（v4 不支持） - 定义了非标准的中间变量（如
--bg-100） - 使用了
calc()计算（v4 中应直接使用值）
解决方案
核心变更
-
移除 CSS 变量引用
- ❌
--color-background: var(--bg-100); - ✅
--color-background: #151931;
- ❌
-
简化主题令牌
- 只保留 Tailwind 语义化颜色（
--color-*） - 移除中间变量（
--bg-100/200/300）
- 只保留 Tailwind 语义化颜色（
-
使用
@apply指令- 在
@layer base中使用 Tailwind 工具类 - 例：
@apply bg-background text-foreground
- 在
-
分离自定义变量
- 功能色（success/warning/error）
- 轨道颜色（track-*）
- 布局尺寸（sidebar-width-*）
- 这些放在
:root中，不在@theme内
文件变更
修改文件：client/src/styles/globals.css
关键改动：
/* ✅ 正确的 Tailwind v4 语法 */
@theme {
--color-background: #151931;
--color-primary: #86b9ff;
--font-sans: "Inter", "PingFang SC", sans-serif;
}
/* ✅ 使用 @apply */
@layer base {
body {
@apply bg-background text-foreground;
}
}
/* ✅ 自定义变量独立定义 */
:root {
--color-success: #5eead4;
--sidebar-width-collapsed: 60px;
}
Tailwind v4 关键特性
-
无需
tailwind.config.js- 配置直接写在 CSS 中
- 使用
@theme指令
-
语义化令牌
--color-background→bg-background--color-primary→bg-primary--font-sans→font-sans
-
性能优化
- 按需编译
- 更快的构建速度
验证方法
- 重启开发服务器：
npm run dev - 检查浏览器 DevTools：
- 查看
<body>是否应用了background-color: #151931 - 检查按钮是否使用了
--color-primary
- 查看
- 测试组件：
- 使用
bg-primary类名 - 使用
text-foreground类名
- 使用
参考资料
补充修复：主题切换问题
问题
切换亮色/暗色主题无反应，原因是使用了 @media (prefers-color-scheme: light) 而非类名选择器。
解决方案
将 @media (prefers-color-scheme: light) 改为 .light 类选择器，配合 settingsStore 的 applyTheme 逻辑。
修改前：
@media (prefers-color-scheme: light) {
:root { ... }
}
修改后：
.light {
--color-background: #ffffff;
/* ... */
}
工作原理
- 用户点击主题切换按钮
settingsStore.setTheme()被调用applyTheme()给<html>添加.light或.dark类- CSS 根据类名应用对应的颜色变量
验证
# 开发者工具检查
document.documentElement.classList
# 应该包含 'light' 或 'dark'