name: 样式指南 description: CSS和Tailwind样式指南。当编写样式、创建UI组件、审查CSS/Tailwind代码或决定包装元素结构时使用。
样式指南
最小化包装元素
避免创建不必要的包装div。如果类可以直接应用于现有语义元素以达到相同效果，首选这种方法。
好（直接应用）
<main class="flex-1 mx-auto max-w-7xl">
{@render children()}
</main>
避免（不必要的包装）
<main class="flex-1">
<div class="mx-auto max-w-7xl">
{@render children()}
</div>
</main>
此原则适用于所有样式不与元素的语义目的冲突或导致布局问题的元素。
Tailwind最佳实践
- 使用
cn()工具函数从$lib/utils来有条件地组合类 - 优先使用工具类而不是自定义CSS
- 使用
tailwind-variants用于组件变体系统 - 遵循
background/foreground颜色约定 - 利用CSS变量来保持主题一致性