Cursor rule

1---
2globs: *.vue
3alwaysApply: false
4---
5 
6---
7 
8description: 现代 Web 应用的 Tailwind CSS 与 UI 组件最佳实践
9globs: **/\*.css, **/_.tsx, \*\*/_.jsx, tailwind.config.js, tailwind.config.ts
10 
11---
12 
13# Tailwind CSS 最佳实践
14 
15## 项目配置
16 
17- 采用合理的 Tailwind 配置方案
18- 正确配置主题扩展（Theme Extension）
19- 设置完善的清除（Purge）规则
20- 合理集成插件（Plugin）
21- 配置自定义间距（Spacing）与断点（Breakpoints）
22- 规范定义颜色板（Color Palette）
23 
24## 组件样式
25 
26- 优先使用工具类（Utility Classes）而非自定义 CSS
27- 需要时通过`@apply`组合相关工具类
28- 合理使用响应式设计工具类
29- 完善暗黑模式（Dark Mode）实现
30- 规范状态变体（State Variants）样式
31- 保持组件样式一致性
32 
33## 布局设计
34 
35- 高效使用 Flexbox 与 Grid 工具类
36- 实现统一的间距系统（Spacing System）
37- 按需应用容器查询（Container Queries）
38- 规范响应式断点（Responsive Breakpoints）
39- 合理使用内边距（Padding）与外边距（Margin）工具类
40- 完善对齐（Alignment）工具类应用
41 
42## 排版规范
43 
44- 采用合理的字体大小（Font Size）工具类
45- 规范行高（Line Height）设置
46- 合理使用字重（Font Weight）工具类
47- 正确配置自定义字体（Custom Fonts）
48- 规范文本对齐（Text Alignment）方式
49- 完善文本装饰（Text Decoration）样式
50 
51## 颜色管理
52 
53- 采用语义化颜色命名（Semantic Color Naming）
54- 确保颜色对比度（Color Contrast）符合可访问性标准
55- 高效使用透明度（Opacity）工具类
56- 规范自定义颜色配置
57- 合理应用渐变（Gradient）工具类
58- 完善悬停（Hover）状态样式
59 
60## 组件开发
61 
62- 可用时优先使用 shadcn/ui 组件库
63- 合理扩展基础组件（Component Extension）
64- 保持组件变体（Variants）风格一致
65- 实现流畅的动画（Animation）效果
66- 规范过渡（Transition）工具类使用
67- 全程关注无障碍（Accessibility）设计
68 
69## 响应式设计
70 
71- 采用移动优先（Mobile-First）策略
72- 完善多端断点（Breakpoints）适配
73- 高效应用容器查询（Container Queries）
74- 合理处理不同屏幕尺寸（Screen Sizes）的样式适配
75- 实现响应式排版（Responsive Typography）
76- 规范响应式间距（Responsive Spacing）
77 
78## 性能优化
79 
80- 完善清除（Purge）配置以减少冗余代码
81- 最小化自定义 CSS 代码量
82- 采用合理的缓存策略（Caching Strategies）
83- 实现有效的代码分割（Code Splitting）
84- 优化生产环境构建（Production Build）
85- 监控包体积（Bundle Size）
86 
87## 通用最佳实践
88 
89- 遵循统一的命名规范（Naming Conventions）
90- 保持样式文件组织有序
91- 编写完善的文档说明（Documentation）
92- 实施规范的测试流程（Testing）
93- 严格遵守无障碍设计指南（Accessibility Guidelines）
94 
95- 规范版本控制（Version Control）管理
96