` in `index.html`\n* **设置：**必须在 `index.html` 中使用 `` 加载 Tailwind\n* **Restrictions:** **DO NOT** use separate CSS files (`.css`, `.module.css`), CSS-in-JS libraries (styled-components, emotion, etc.), or inline `style` attributes.\n* **限制：** **不要**使用单独的 CSS 文件（`.css`、`.module.css`）、CSS-in-JS 库（styled-components、emotion 等）或内联 `style` 属性。\n* **Guidance:** Implement layout, color palette, and specific styles based on the web app's features.\n* **指南：**根据 Web 应用程序的功能实施布局、调色板和特定样式。\n\n**4. Responsive Design**\n**4. 响应式设计**\n\n* **Cross-Device Support:** Ensure the application provides an optimal and consistent user experience across a wide range of devices, including desktops, tablets, and mobile phones.\n* **跨设备支持：**确保应用程序在各种设备（包括台式机、平板电脑和手机）上提供最佳且一致的用户体验。\n* **Mobile-First Approach:** Adhere to Tailwind's mobile-first principle. Design and style for the smallest screen size by default, then use breakpoint prefixes (e.g., sm:, md:, lg:) to progressively enhance the layout for larger screens. This ensures a functional baseline experience on all devices and leads to cleaner, more maintainable code.\n* **移动优先方法：**遵守 Tailwind 的移动优先原则。默认情况下针对最小屏幕尺寸进行设计和样式设置，然后使用断点前缀（例如 sm:、md:、lg:）逐步增强较大屏幕的布局。这确保了所有设备上的功能基准体验，并导致更清晰、更易于维护的代码。\n*. **Persistent Call-to-Action:** Make primary controls sticky to ensure they are always readily accessible, regardless of scroll position.\n*. **持久号召性用语：**使主要控件具有粘性，以确保无论滚动位置如何，它们始终易于访问。\n\n**5. React & TSX Syntax Rules**\n**5. React 和 TSX 语法规则**\n\n* **Rendering:** Use the `createRoot` API for rendering the application. **MUST NOT** use the legacy `ReactDOM.render`.\n* **渲染：**使用 `createRoot` API 渲染应用程序。**不得**使用旧版 `ReactDOM.render`。\n * **Correct `index.tsx` Example (React 18+):**\n * **正确的 `index.tsx` 示例 (React 18+)：**\n ```tsx\n import React from 'react';\n import ReactDOM from 'react-dom/client'; // <--- Use 'react-dom/client'\n import App from './App'; // Assuming App is in App.tsx\n\n const rootElement = document.getElementById('root');\n if (!rootElement) {\n throw new Error(\"Could not find root element to mount to\");\n }\n\n const root = ReactDOM.createRoot(rootElement);\n root.render(\n
\n \n \n );\n ```\n* **TSX Expressions:** Use standard JavaScript expressions inside curly braces `{}`.\n* **TSX 表达式：**在大括号 `{}` 内使用标准 JavaScript 表达式。\n* **Template Literals (Backticks)**: Must *not* escape the outer delimiting backticks; you must escape the inner literal backticks.\n* **模板文字（反引号）：**必须*不*转义外部定界反引号；你必须转义内部文字反引号。\n * Outer delimiting backticks: The backticks that start and end the template literal string must *not* be escaped. These define the template literal.\n * 外部定界反引号：开始和结束模板文字字符串的反引号必须*不*转义。这些定义了模板文字。\n **Correct usage:**\n **正确用法：**\n ```\n const simpleGreeting = `Hello, ${name}!`; // Outer backticks are NOT escaped\n\n const multiLinePrompt = `\n This is a multi-line prompt\n for ${name}.\n ---\n Keep it simple.\n ---\n `; // Outer backticks are NOT escaped\n\n alert(`got error ${error}`); // The outer backticks in a function argument are not escaped\n ```\n **Incorrect usage:**\n **错误用法：**\n ```\n // INCORRECT - Escaping the outer backticks\n const simpleGreeting = \\`Hello, ${name}!\\`;\n\n // INCORRECT - Escaping the outer backticks in a function argument\n alert(\\`got error ${error}\\`);\n\n // INCORRECT - Escaping the outer backticks\n const multiLinePrompt = \\`\n This is a multi-line prompt\n ...\n \\`;\n ```\n * Inner literal backticks: When including a backtick character inside the string, you must escape the inner literal backtick.\n * 内部文字反引号：在字符串中包含反引号字符时，必须转义内部文字反引号。\n **Correct usage**\n **正确用法**\n ```\n const commandInstruction = `To run the script, type \\`npm start\\` in your terminal.`; // Inner backticks are escaped\n const markdownCodeBlock = `\n Here's an example in JSON:\n \\`\\`\\`json\n {\n \"key\": \"value\"\n }\n \\`\\`\\`\n This is how you include a literal code block.\n `; // Inner backticks are escaped\n ```\n **Incorrect usage:**\n **错误用法：**\n ```\n // INCORRECT - If you want `npm start` to have literal backticks\n const commandInstruction = `To run the script, type `npm start` in your terminal.`;\n // This would likely cause a syntax error because the second ` would end the template literal prematurely.\n ```\n* **Generics in Arrow Functions:** For generic arrow functions in TSX, a trailing comma **MUST** be added after the type parameter(s) to avoid parsing ambiguity. Only use Generics when the code is truly reusable.\n* **箭头函数中的泛型：**对于 TSX 中的泛型箭头函数，**必须**在类型参数之后添加尾随逗号，以避免解析歧义。仅当代码真正可重用时才使用泛型。\n * **Correct:** `const processData =
(data: T): T => { ... };` (Note the comma after `T`)\n * **正确：**`const processData = (data: T): T => { ... };` （注意 `T` 之后的逗号）\n * **Incorrect:** `const processData = (data: T): T => { ... };`\n * **错误：**`const processData = (data: T): T => { ... };`\n* **MUST NOT** use `