// tailwind.config.jsmodule.exports={theme:{cursor:{auto:'auto',default:'default',pointer:'pointer',-wait:'wait',text:'text',-move:'move','not-allowed':'not-allowed',+crosshair:'crosshair',+'zoom-in':'zoom-in',}
Tailwind CSS Cursor Classes - Learn how to use cursor classes in Tailwind CSS to control the mouse cursor appearance in your web applications.
run-npm-install: Run'npm install' to install dependencies before running terminal commands (Specific workflow step)frontend-layout: The frontendofthe codebase uses tailwind css (Specific technology choice) </examples\_should\_remember> <labeling\_instructions> The label should be descriptiveofthe gene...
CSS cursor 属性 实例 一些不同的光标: span.crosshair {cursor:crosshair} span.help {cursor:help} span.wait {cursor:wait} 尝试一下 » 属性定义及使用说明 cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 默认值:
# 文件模式: *.tsx, *.ts ## React 规范 - 使用函数组件 - 实现完整的 prop 类型 - 遵循 React 最佳实践 ## 样式 - 使用 Tailwind CSS - 遵循团队样式指南 @file ../tsconfig.json @file ../tailwind.config.js 该规则指定了作用于 *.tsx/*.ts 文件的项目规范(使用函数组件、类型检查、Tailwind 样...
- 样式使用Tailwind CSS@file ../tailwind.config.js # 引入配置文件 场景3:自动生成模板 markdownmarkdown复制# express-template.mdc --- description: Express 服务模板 manual: true # 手动调用 --- ## Express 服务规则 1. 遵循 RESTful 设计
UI与样式分离:v0生成的React组件代码中,样式基于TailwindCSS,而UI基于shadcn。这种方式带来了两个主要优点,首先,组件逻辑可以自由修改,无需担心组件未暴露相应的props,因为整个组件的源代码都被直接复制下来了;其次,UI与样式分离,复制的组件仅包含基础样式,开发者可以根据需要添加自定义样式。
所有修改会通过 Tailwind CSS 自动转换为代码,无需手动编写 CSS。 比如你有一个网站是使用 Next.js + TailwindCSS 开发的,就能使用这个开源的可视化 AI 代码编辑器进行辅助编程。 你直接让 AI 帮你写一个新的网站,或者导入你已有的网站代码。这样你使用 Onlook 就能左侧预览,右侧编辑代码了。
markdownmarkdown复制# react.mdc---globs: ["*.tsx"]autoAttach: true---## React 规范- 使用函数组件 + Hooks- 禁止类组件- Props 必须定义接口类型- 样式使用 Tailwind CSS@file ../tailwind.config.js # 引入配置文件 场景3:自动生成模板
- HTML 原型实现:使用 HTML + Tailwind CSS(或 Bootstrap)生成所有原型界面,并使用 FontAwesome(或其他开源 UI 组件)让界面更加精美、接近真实的 App 设计。拆分代码文件,保持结构清晰。 - 每个界面应作为独立的 HTML 文件存放,例如 home.html、profile.html、settings.html 等。- index.html 作为主入口,不直接...