` in `index.html`\n* **Settings:**Must be. `index.html` Use `` Load 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* **Limits:** **Don't.**Use separate CSS Documentation`.css`、`.module.css`）、CSS-in-JS Librarystyled-components、emotion or interconnection `style` attribute.\n* **Guidance:** Implement layout, color palette, and specific styles based on the web app's features.\n\n**4. Responsive Design**\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* **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*. **Persistent Call-to-Action:** Make primary controls sticky to ensure they are always readily accessible, regardless of scroll position.\n\n**5. React & TSX Syntax Rules**\n**5. React and TSX Syntax:**\n\n* **Rendering:** Use the `createRoot` API for rendering the application. **MUST NOT** use the legacy `ReactDOM.render`.\n * **Correct `index.tsx` Example (React 18+):**\n * **Right. `index.tsx` Example: (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* **Template Literals (Backticks)**: Must *not* escape the outer delimiting backticks; you must escape the inner literal backticks.\n * Outer delimiting backticks: The backticks that start and end the template literal string must *not* be escaped. These define the template literal.\n **Correct usage:**\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 // 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 **Correct usage**\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 // 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 * **Correct:** `const processData = (data: T): T => { ... };` (Note the comma after `T`)\n * **Correct:**`const processData = (data: T): T => { ... };` （Attention. `T` After comma)\n * **Incorrect:** `const processData = (data: T): T => { ... };`\n * **Error:**`const processData = (data: T): T => { ... };`\n* **MUST NOT** use `