cr-solidjs-tailwind

SolidJS 与 Tailwind CSS 的 Cursor 规则 1. **组件结构** - 使用 SolidJS 的函数式组件语法，确保组件以 `export default` 形式导出。 - 组件名称采用 PascalCase（大驼峰命名法）。 2. **Tailwind 类名使用** - 优先使用 Tailwind 的原子化类名进行样式设计，避免自定义 CSS。 - 类名按功能分组排列（如布局、间距、颜色等），保持可读性。 3. **响应式设计** - 使用 Tailwind 的断点前缀（如 `sm:`、`md:`、`lg:`）实现响应式布局。 - 移动端优先原则，从小屏幕开始设计。 4. **状态管理** - 使用 SolidJS 的响应式原语（如 `createSignal`、`createMemo`）管理状态。 - 避免直接操作 DOM，优先通过状态驱动 UI 更新。 5. **事件处理** - 事件处理器使用内联箭头函数或具名函数，确保类型安全（TypeScript 推荐）。 - 事件对象类型标注为 `Event` 或具体类型（如 `MouseEvent`）。 6. **条件渲染** - 使用 SolidJS 的控制流组件（如 `<Show>`、`<For>`、`<Switch>`）替代手动条件判断。 - 避免在 JSX 中使用三元运算符嵌套过深。 7. **Props 传递** - Props 类型通过 TypeScript 接口定义，默认值使用 `mergeProps` 处理。 - 复杂对象传递时使用解构，保持代码清晰。 8. **性能优化** - 对静态内容使用 `<Dynamic>` 组件或 `untrack` 减少响应式依赖。 - 列表渲染时使用 `<For>` 并指定唯一 `key`。 9. **代码组织** - 将样式相关的逻辑（如动态类名计算）抽离为独立函数或 `createMemo`。 - 公共组件提取到单独文件，遵循单一职责原则。 10. **工具类扩展** - 如需扩展 Tailwind 配置，通过 `tailwind.config.js` 添加自定义工具类或主题变量。 - 避免全局样式污染，优先使用 `@apply` 指令或组件封装。 11. **TypeScript 集成** - 所有组件和函数添加类型注解，启用严格模式（`strict: true`）。 - 使用 SolidJS 的类型工具（如 `Component`、`JSX.Element`）确保类型安全。 12. **测试友好性** - 组件逻辑与 UI 分离，便于单元测试。 - 使用 `@testing-library/solid` 进行测试时，优先通过文本或角色查询元素。 > 注：本规则适用于 SolidJS 1.0+ 和 Tailwind CSS 3.0+ 版本。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本