UnoCSS主题配置中fontSize的注意事项

在UnoCSS项目中配置字体大小(fontSize)主题时，开发者可能会遇到一个常见问题：当使用类似TailwindCSS的驼峰式(camelCase)写法配置附加样式时，生成的CSS属性无法被浏览器正确识别。

问题现象

当在UnoCSS配置文件中这样定义字体大小主题：

export default defineConfig({
  theme: {
    fontSize: {
      '2xl': ['1.5rem', {
        lineHeight: '2rem',
        letterSpacing: '-0.01em',
        fontWeight: '500',
      }],
    },
  },
});

生成的CSS会保留驼峰式属性名：

.text-2xl {
  font-size: 1.5rem;
  lineHeight: 2rem;      /* 浏览器无法识别 */
  letterSpacing: -.01em;  /* 浏览器无法识别 */
  fontWeight: 500;       /* 浏览器无法识别 */
}

正确配置方式

UnoCSS要求使用标准的CSS属性名写法（kebab-case），有以下两种等效的正确配置方式：

1. 直接使用kebab-case属性名：

'2xl': ['1.5rem', {
  'line-height': '2rem',
  'letter-spacing': '-0.01em',
  'font-weight': '500',
}]

2. 使用字符串包裹的驼峰式属性名：

'2xl': ['1.5rem', {
  'lineHeight': '2rem',
  'letterSpacing': '-0.01em',
  'fontWeight': '500',
}]

设计考量

UnoCSS团队在设计时有意不直接支持驼峰式CSS属性名，主要基于以下考虑：

1. 性能优化：避免额外的驼峰转kebab的转换过程
2. 规范统一：直接使用CSS标准属性名写法，减少认知负担
3. 一致性：保持与静态规则(static rules)相同的处理方式

与TailwindCSS的差异

虽然UnoCSS在设计上参考了TailwindCSS的theme系统，但在细节实现上有所区别：

• TailwindCSS会自动将驼峰式属性名转换为kebab-case
• UnoCSS要求开发者显式使用kebab-case或字符串包裹的驼峰式

这种设计差异体现了UnoCSS追求更简洁、更高效的核心理念，虽然增加了少量迁移成本，但带来了更好的运行时性能。

最佳实践

对于从TailwindCSS迁移到UnoCSS的项目，建议：

1. 批量替换驼峰式属性名为kebab-case
2. 使用IDE的批量替换功能提高效率
3. 在团队内统一约定配置写法标准

通过遵循这些实践，可以确保UnoCSS主题配置的正确性，同时保持代码的可维护性。