@trapar-waves/react-tailwind 1.1.23 → 2.0.0

package/README.md

@@ -7,13 +7,15 @@
 ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
 ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
 
+![React Tailwind](assets/readme/hero.svg)
+
 ---
 
 [中文](./readme/README-CN.md) | [日本語](./readme/README-JP.md) | [Русский язык](./readme/README-RU.md)
 
 > A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.
 
-## ✨ Features
+![Features](assets/readme/headers/features.svg)
 
 - **Modern UI Framework:** Built using React (v19) for a component-driven, declarative interface.
 - **Utility-First Styling:** Employs Tailwind CSS v4 (`tailwindcss`) along with `@tailwindcss/postcss`, enabling flexible and rapid styling while maintaining consistency.
@@ -23,7 +25,23 @@
 - **Focus on Code Quality:** Includes ESLint with `@antfu/eslint-config` for linting and enforcing best practices in the codebase.
 - **Git Hooks:** Integrated `husky` and `lint-staged` for pre-commit checks.
 
-## 💻 Tech Stack
+## GitHub Pages
+
+Pushing a version tag matching `v*` runs [`.github/workflows/pages.yml`](./.github/workflows/pages.yml), which builds with `BASE_PATH=/<repository-name>/`, copies `dist/index.html` to `dist/404.html` for SPA routing, and deploys to GitHub Pages. In the repository **Settings → Pages**, set **Source** to **GitHub Actions** once.
+
+Local subpath check (Unix-like shell):
+
+```bash
+BASE_PATH=/react-tailwind/ pnpm run build && pnpm preview
+```
+
+PowerShell:
+
+```powershell
+$env:BASE_PATH="/react-tailwind/"; pnpm run build; pnpm preview
+```
+
+![Tech Stack](assets/readme/headers/tech-stack.svg)
 
 - **Framework/Library:** React (v19)
 - **Styling:** Tailwind CSS (`tailwindcss`)
@@ -35,22 +53,13 @@
 
 See the [package.json](./package.json) for a full list of dependencies.
 
-## 🚀 Getting Started
-
-Follow these instructions to get the project running locally.
+![Getting Started](assets/readme/headers/getting-started.svg)
 
 ### Prerequisites
 
-Ensure you have the following installed:
-
 - Node.js (>= 18.x recommended)
 - Package manager (npm, yarn, or pnpm)
 
-```bash
-node -v
-npm -v
-```
-
 ### Installation
 
 1. Create a new project using the template:
@@ -63,10 +72,6 @@ npm -v
 
    ```bash
    pnpm install
-   # or
-   npm install
-   # or
-   yarn install
    ```
 
 3. Start the development server:
@@ -75,7 +80,7 @@ npm -v
    pnpm dev
    ```
 
-## 🧱 Project Structure
+![Project Structure](assets/readme/headers/project-structure.svg)
 
 ```
 ├── public/           # Static assets
@@ -89,7 +94,7 @@ npm -v
 └── package.json      # Project dependencies and scripts
 ```
 
-## 🤝 Contributing
+![Contributing](assets/readme/headers/contributing.svg)
 
 Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
 
@@ -99,6 +104,10 @@ Contributions are welcome and greatly appreciated! Please follow these steps to
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
+![License](assets/readme/headers/license.svg)
+
+MIT License © 2025 Trapar Waves
+
 ## 👤 Author
 
 - **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
@@ -107,5 +116,4 @@ Contributions are welcome and greatly appreciated! Please follow these steps to
 ## 🔗 Links
 
 - **Repository:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
-- **Homepage:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
 - **Issues:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)

package/assets/readme/headers/contributing.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
+  <title>Contributing section header</title>
+  <defs>
+    <linearGradient id="bg-contrib" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background (opaque) -->
+  <rect width="1200" height="80" fill="#FFFFFF"/>
+  <rect width="1200" height="80" fill="url(#bg-contrib)"/>
+
+  <!-- Border -->
+  <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
+
+  <!-- Bottom accent -->
+  <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
+
+  <!-- Emoji -->
+  <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">🤝</text>
+
+  <!-- Title -->
+  <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
+    Contributing
+  </text>
+</svg>

package/assets/readme/headers/features.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
+  <title>Features section header</title>
+  <defs>
+    <linearGradient id="bg-features" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background (opaque) -->
+  <rect width="1200" height="80" fill="#FFFFFF"/>
+  <rect width="1200" height="80" fill="url(#bg-features)"/>
+
+  <!-- Border -->
+  <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
+
+  <!-- Bottom accent -->
+  <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
+
+  <!-- Emoji -->
+  <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">✨</text>
+
+  <!-- Title -->
+  <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
+    Features
+  </text>
+</svg>

package/assets/readme/headers/getting-started.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
+  <title>Getting Started section header</title>
+  <defs>
+    <linearGradient id="bg-start" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background (opaque) -->
+  <rect width="1200" height="80" fill="#FFFFFF"/>
+  <rect width="1200" height="80" fill="url(#bg-start)"/>
+
+  <!-- Border -->
+  <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
+
+  <!-- Bottom accent -->
+  <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
+
+  <!-- Emoji -->
+  <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">🚀</text>
+
+  <!-- Title -->
+  <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
+    Getting Started
+  </text>
+</svg>

package/assets/readme/headers/license.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
+  <title>License section header</title>
+  <defs>
+    <linearGradient id="bg-license" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background (opaque) -->
+  <rect width="1200" height="80" fill="#FFFFFF"/>
+  <rect width="1200" height="80" fill="url(#bg-license)"/>
+
+  <!-- Border -->
+  <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
+
+  <!-- Bottom accent -->
+  <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
+
+  <!-- Emoji -->
+  <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">📄</text>
+
+  <!-- Title -->
+  <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
+    License
+  </text>
+</svg>

package/assets/readme/headers/project-structure.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
+  <title>Project Structure section header</title>
+  <defs>
+    <linearGradient id="bg-struct" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background (opaque) -->
+  <rect width="1200" height="80" fill="#FFFFFF"/>
+  <rect width="1200" height="80" fill="url(#bg-struct)"/>
+
+  <!-- Border -->
+  <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
+
+  <!-- Bottom accent -->
+  <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
+
+  <!-- Emoji -->
+  <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">📁</text>
+
+  <!-- Title -->
+  <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
+    Project Structure
+  </text>
+</svg>

package/assets/readme/headers/tech-stack.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
+  <title>Tech Stack section header</title>
+  <defs>
+    <linearGradient id="bg-tech" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
+      <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background (opaque) -->
+  <rect width="1200" height="80" fill="#FFFFFF"/>
+  <rect width="1200" height="80" fill="url(#bg-tech)"/>
+
+  <!-- Border -->
+  <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
+
+  <!-- Bottom accent -->
+  <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
+
+  <!-- Emoji -->
+  <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">💻</text>
+
+  <!-- Title -->
+  <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
+    Tech Stack
+  </text>
+</svg>

package/assets/readme/hero.svg

@@ -0,0 +1,100 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 450" width="100%">
+  <title>React Tailwind - Modern React + Tailwind CSS starter template</title>
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#F8FAFC"/>
+      <stop offset="100%" style="stop-color:#F1F5F9"/>
+    </linearGradient>
+    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+      <circle cx="1" cy="1" r="0.5" fill="#E2E8F0" opacity="0.5"/>
+    </pattern>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="450" fill="url(#bg)"/>
+  <rect width="1200" height="450" fill="url(#grid)"/>
+
+  <!-- Left side: Project identity (40%) -->
+  <g transform="translate(60, 60)">
+    <!-- Organization name -->
+    <text x="0" y="30" font-family="ui-monospace, monospace" font-size="18" fill="#64748B">
+      trapar-waves
+    </text>
+
+    <!-- Repository name -->
+    <text x="0" y="90" font-family="system-ui, sans-serif" font-size="64" font-weight="bold" fill="#06B6D4">
+      react-tailwind
+    </text>
+
+    <!-- Description -->
+    <text x="0" y="140" font-family="system-ui, sans-serif" font-size="24" fill="#475569">
+      Modern React + Tailwind CSS
+    </text>
+    <text x="0" y="175" font-family="system-ui, sans-serif" font-size="24" fill="#475569">
+      starter template
+    </text>
+  </g>
+
+  <!-- Right side: Feature cards (60%) -->
+  <g transform="translate(520, 60)">
+    <!-- Card 1: Fast Dev -->
+    <g transform="translate(0, 0)">
+      <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
+      <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">⚡</text>
+      <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
+        Fast Dev
+      </text>
+      <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        Rsbuild hot reload
+      </text>
+      <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        for instant feedback
+      </text>
+    </g>
+
+    <!-- Card 2: Tailwind CSS -->
+    <g transform="translate(310, 0)">
+      <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
+      <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">🎨</text>
+      <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
+        Tailwind CSS
+      </text>
+      <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        Utility-first styling
+      </text>
+      <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        for rapid development
+      </text>
+    </g>
+
+    <!-- Card 3: Type Safe -->
+    <g transform="translate(0, 160)">
+      <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
+      <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">🔧</text>
+      <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
+        Type Safe
+      </text>
+      <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        TypeScript support
+      </text>
+      <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        for reliable code
+      </text>
+    </g>
+
+    <!-- Card 4: Modern -->
+    <g transform="translate(310, 160)">
+      <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
+      <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">📦</text>
+      <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
+        Modern
+      </text>
+      <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        React 19 + latest
+      </text>
+      <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
+        toolchain
+      </text>
+    </g>
+  </g>
+</svg>

package/eslint.config.js

@@ -1,16 +1,14 @@
-import antfu from "@antfu/eslint-config";
+import { rentonReact } from "@renton/eslint-config-react";
 
-export default antfu({
+export default rentonReact({
   stylistic: {
     quotes: "double",
     semi: true,
   },
-  markdown: true,
-  jsonc: true,
-  typescript: true,
-  yaml: true,
-  react: true,
-  formatters: {
-    markdown: "prettier",
+}, {
+  files: ["pnpm-workspace.yaml"],
+  name: "trapar/pnpm-workspace-yaml-trust-policy",
+  rules: {
+    "pnpm/yaml-enforce-settings": "off",
   },
 });

package/lint-staged.config.js

@@ -1,5 +1,5 @@
 /**
- * @filename: lint-staged.config.js
+ * @file lint-staged.config.js
  * @type {import('lint-staged').Configuration}
  */
 export default {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@trapar-waves/react-tailwind",
   "type": "module",
-  "version": "1.1.23",
-  "packageManager": "pnpm@10.30.0",
+  "version": "2.0.0",
+  "packageManager": "pnpm@11.24.0",
   "description": "A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.",
   "author": {
     "email": "admin@rikka.cc",
@@ -32,31 +32,35 @@
   "scripts": {
     "dev": "rsbuild dev --open",
     "build": "rsbuild build",
+    "build:rsdoctor": "cross-env RSDOCTOR=true rsbuild build",
     "preview": "rsbuild preview",
     "lint": "eslint . --cache --max-warnings=0 --no-warn-ignored",
     "postinstall": "husky"
   },
   "dependencies": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^7.4.3",
-    "@eslint-react/eslint-plugin": "^2.13.0",
-    "@iconify/json": "^2.2.440",
-    "@iconify/tailwind4": "^1.2.1",
-    "@rsbuild/core": "^1.7.3",
-    "@rsbuild/plugin-react": "^1.4.5",
-    "@tailwindcss/postcss": "^4.2.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "^10.0.0",
-    "eslint-plugin-format": "^1.4.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
+    "@eslint-react/eslint-plugin": "^5.18.6",
+    "@iconify/json": "^2.2.522",
+    "@iconify/tailwind4": "^1.2.3",
+    "@renton/eslint-config-react": "^1.0.0",
+    "@rsbuild/core": "^2.2.1",
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@rsdoctor/rspack-plugin": "^1.6.3",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "cross-env": "^10.1.0",
+    "eslint": "^10.9.1",
+    "eslint-plugin-format": "^2.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.5",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
-    "tailwindcss": "^4.2.0",
-    "typescript": "^5.9.3"
+    "lint-staged": "^17.4.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "unplugin-turbo-console": "^2.3.3"
   }
 }

package/pnpm-workspace.yaml

@@ -1,3 +1,9 @@
+minimumReleaseAge: 0
+
+shellEmulator: true
+
+trustPolicy: off
+
 onlyBuiltDependencies:
   - "@tailwindcss/oxide"
   - core-js

package/readme/README-CN.md

@@ -7,105 +7,97 @@
 ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
 ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
 
+![React Tailwind](../assets/readme/hero.svg)
+
 ---
 
 [English](../README.md) | [日本語](./README-JP.md) | [Русский язык](./README-RU.md)
 
-> 一个现代UI开发模板，集成了React和Tailwind CSS，以及Rsbuild、TypeScript、ESLint (Antfu config)和Iconify支持。
-
-## ✨ 特性
+> 一个现代化的 UI 开发模板，集成了 React 和 Tailwind CSS，配合 Rsbuild、TypeScript、ESLint（Antfu 配置）和 Iconify 支持。
 
-- **现代UI框架:** 使用React (v19)构建组件驱动的声明式界面。
-- **实用优先的样式:** 采用Tailwind CSS v4 (`tailwindcss`)和`@tailwindcss/postcss`，实现灵活快速的样式设计，同时保持一致性。
-- **快速开发工作流:** 使用Rsbuild（`@rsbuild/core`和`@rsbuild/plugin-react`）实现优化构建和高效开发服务器性能。
-- **图标支持:** 包含`@iconify/json`和`@iconify/tailwind4`，提供可扩展和可定制的图标。
-- **类型安全:** 使用TypeScript (v5.9.x)增强代码可靠性，并在开发过程中提供强大的类型检查。
-- **注重代码质量:** 包含ESLint和`@antfu/eslint-config`，用于代码 linting 和执行最佳实践。
-- **Git Hooks:** 集成`husky`和`lint-staged`用于提交前检查。
+![Features](../assets/readme/headers/features.svg)
 
-## 💻 技术栈
+- **现代 UI 框架：** 使用 React (v19) 构建，支持组件驱动的声明式接口。
+- **实用优先的样式：** 采用 Tailwind CSS v4（`tailwindcss`）和 `@tailwindcss/postcss`，实现灵活快速的样式开发，同时保持一致性。
+- **快速开发工作流：** 使用 Rsbuild（`@rsbuild/core` 和 `@rsbuild/plugin-react`）进行优化构建和高效开发服务器性能。
+- **图标支持：** 包含 `@iconify/json` 和 `@iconify/tailwind4`，提供可扩展和可定制的图标。
+- **类型安全：** 利用 TypeScript (v5.9.x) 提高代码可靠性，并在开发过程中提供强大的类型检查。
+- **代码质量：** 包含 ESLint 和 `@antfu/eslint-config` 进行代码检查和最佳实践 enforcement。
+- **Git Hooks：** 集成 `husky` 和 `lint-staged` 进行提交前检查。
 
-- **框架/库:** React (v19)
-- **样式:** Tailwind CSS (`tailwindcss`)
-- **构建工具:** Rsbuild (`@rsbuild/core`)
-- **语言:** TypeScript (v5.9.x)
-- **CSS处理:** PostCSS with `@tailwindcss/postcss`
-- **代码检查:** ESLint与`@antfu/eslint-config`
-- **图标库:** Iconify (`@iconify/json`, `@iconify/tailwind4`)
+![Tech Stack](../assets/readme/headers/tech-stack.svg)
 
-完整依赖列表参见[package.json](../package.json)。
+- **框架/库：** React (v19)
+- **样式：** Tailwind CSS (`tailwindcss`)
+- **构建工具：** Rsbuild (`@rsbuild/core`)
+- **语言：** TypeScript (v5.9.x)
+- **CSS 处理：** PostCSS 和 `@tailwindcss/postcss`
+- **代码检查：** ESLint 和 `@antfu/eslint-config`
+- **图标：** Iconify (`@iconify/json`, `@iconify/tailwind4`)
 
-## 🚀 开始使用
+查看 [package.json](../package.json) 获取完整的依赖列表。
 
-按照以下说明在本地运行项目。
+![Getting Started](../assets/readme/headers/getting-started.svg)
 
-### 前提条件
+## 前置条件
 
-确保已安装以下软件：
+- Node.js（推荐 >= 18.x）
+- 包管理器（npm、yarn 或 pnpm）
 
-- Node.js (推荐 >= 18.x 版本)
-- 包管理器 (npm, yarn 或 pnpm)
-
-```bash
-node -v
-npm -v
-```
+### 安装
 
-### 安装步骤
-
-1. 使用模板创建新项目:
+1. 使用模板创建新项目：
 
    ```bash
    pnpm create trapar-waves
    ```
 
-2. 导航到项目目录并安装依赖:
+2. 导航到项目目录并安装依赖：
 
    ```bash
    pnpm install
-   # or
-   npm install
-   # or
-   yarn install
    ```
 
-3. 启动开发服务器:
+3. 启动开发服务器：
 
    ```bash
    pnpm dev
    ```
 
-## 🧱 项目结构
+![Project Structure](../assets/readme/headers/project-structure.svg)
 
 ```
 ├── public/           # 静态资源
 ├── src/              # 源代码
-│   ├── App.css       # 全局样式和Tailwind导入
+│   ├── App.css       # 全局样式和 Tailwind 导入
 │   ├── App.tsx       # 主应用组件
 │   └── index.tsx     # 入口点
-├── rsbuild.config.ts # Rsbuild配置
-├── tsconfig.json     # TypeScript配置
-├── eslint.config.js  # ESLint配置
+├── rsbuild.config.ts # Rsbuild 配置
+├── tsconfig.json     # TypeScript 配置
+├── eslint.config.js  # ESLint 配置
 └── package.json      # 项目依赖和脚本
 ```
 
-## 🤝 贡献指南
+![Contributing](../assets/readme/headers/contributing.svg)
 
-欢迎贡献，非常感谢您的支持！请按照以下步骤进行贡献：
+欢迎贡献，非常感谢！请按照以下步骤贡献：
 
-1. Fork 本仓库
-2. 创建功能分支（`git checkout -b feature/amazing-feature`）
-3. 提交您的更改（`git commit -m 'Add some amazing feature'`）
+1. Fork 仓库
+2. 创建特性分支（`git checkout -b feature/amazing-feature`）
+3. 提交更改（`git commit -m 'Add some amazing feature'`）
 4. 推送到分支（`git push origin feature/amazing-feature`）
-5. 打开Pull Request
+5. 创建 Pull Request
+
+![License](../assets/readme/headers/license.svg)
+
+MIT License © 2025 Trapar Waves
 
-## 👤 Author
+## 👤 作者
 
-- **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
-- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
+- **Rikka：** [admin@rikka.cc](mailto:admin@rikka.cc)
+- **GitHub 主页：** [Muromi-Rikka](https://github.com/Muromi-Rikka)
 
-## 🔗 Links
+## 🔗 链接
 
-- **仓库:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
-- **主页:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
-- **问题:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
+- **仓库：** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
+- **Issues：** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)

package/readme/README-JP.md

@@ -7,105 +7,97 @@
 ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
 ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
 
+![React Tailwind](../assets/readme/hero.svg)
+
 ---
 
 [English](../README.md) | [中文](./README-CN.md) | [Русский язык](./README-RU.md)
 
-> ReactとTailwind CSSを統合したモダンなUI開発テンプレート。Rsbuild、TypeScript、ESLint (Antfu config)、Iconifyをサポート。
-
-## ✨ 特徴
+> React と Tailwind CSS を統合したモダンな UI 開発テンプレート。Rsbuild、TypeScript、ESLint（Antfu 設定）、Iconify サポート付き。
 
-- **モダンUIフレームワーク:** コンポーネント駆動の宣言型インターフェースのためにReact (v19)を使用して構築されています。
-- **ユーティリティファーストのスタイリング:** Tailwind CSS v4 (`tailwindcss`)と`@tailwindcss/postcss`を採用し、一貫性を維持しながら柔軟で迅速なスタイリングを可能にします。
-- **高速開発ワークフロー:** Rsbuild（`@rsbuild/core`と`@rsbuild/plugin-react`）を使用して最適化されたビルドと効率的な開発サーバーパフォーマンスを実現します。
-- **アイコンサポート:** `@iconify/json`と`@iconify/tailwind4`を含み、スケーラブルでカスタマイズ可能なアイコンを提供します。
-- **型安全性:** TypeScript (v5.9.x)を使用してコードの信頼性を向上させ、開発中に堅牢な型チェックを提供します。
-- **コード品質への焦点:** ESLintと`@antfu/eslint-config`を含み、コードベースのリンティングとベストプラクティスの適用を実現します。
-- **Git フック:** `husky`と`lint-staged`を統合し、コミット前のチェックを実施します。
+![Features](../assets/readme/headers/features.svg)
 
-## 💻 技術スタック
+- **モダン UI フレームワーク：** React (v19) を使用したコンポーネント駆動の宣言的インターフェース。
+- **ユーティリティファーストのスタイリング：** Tailwind CSS v4（`tailwindcss`）と `@tailwindcss/postcss` を採用し、柔軟で迅速なスタイリングを実現しながら一貫性を維持。
+- **高速開発ワークフロー：** Rsbuild（`@rsbuild/core` と `@rsbuild/plugin-react`）を使用し、最適化されたビルドと効率的な開発サーバー性能を実現。
+- **アイコンサポート：** `@iconify/json` と `@iconify/tailwind4` を含み、スケーラブルでカスタマイズ可能なアイコンを提供。
+- **型安全性：** TypeScript (v5.9.x) を活用し、コードの信頼性を向上させ、開発中に堅牢な型チェックを提供。
+- **コード品質：** ESLint と `@antfu/eslint-config` を含み、リントとベストプラクティスの適用を強制。
+- **Git Hooks：** `husky` と `lint-staged` を統合し、コミット前チェックを実行。
 
-- **フレームワーク/ライブラリ:** React (v19)
-- **スタイリング:** Tailwind CSS (`tailwindcss`)
-- **ビルドツール:** Rsbuild (`@rsbuild/core`)
-- **言語:** TypeScript (v5.9.x)
-- **CSS処理:** PostCSS with `@tailwindcss/postcss`
-- **リンティング:** `@antfu/eslint-config`を備えたESLint
-- **アイコン:** Iconify (`@iconify/json`, `@iconify/tailwind4`)
+![Tech Stack](../assets/readme/headers/tech-stack.svg)
 
-依存関係の完全なリストについては[package.json](../package.json)を参照してください。
+- **フレームワーク/ライブラリ：** React (v19)
+- **スタイリング：** Tailwind CSS (`tailwindcss`)
+- **ビルドツール：** Rsbuild (`@rsbuild/core`)
+- **言語：** TypeScript (v5.9.x)
+- **CSS 処理：** PostCSS と `@tailwindcss/postcss`
+- **リント：** ESLint と `@antfu/eslint-config`
+- **アイコン：** Iconify (`@iconify/json`, `@iconify/tailwind4`)
 
-## 🚀 始め方
+依存関係の完全なリストは [package.json](../package.json) を参照してください。
 
-以下の手順に従ってプロジェクトをローカルで実行してください。
+![Getting Started](../assets/readme/headers/getting-started.svg)
 
-### 前提条件
+## 前提条件
 
-以下がインストールされていることを確認してください：
-
-- Node.js (推奨バージョン >= 18.x)
-- パッケージマネージャー (npm, yarn または pnpm)
-
-```bash
-node -v
-npm -v
-```
+- Node.js（>= 18.x 推奨）
+- パッケージマネージャー（npm、yarn、または pnpm）
 
 ### インストール
 
-1. テンプレートを使用して新しいプロジェクトを作成:
+1. テンプレートを使用して新しいプロジェクトを作成：
 
    ```bash
    pnpm create trapar-waves
    ```
 
-2. プロジェクトディレクトリに移動し、依存関係をインストール:
+2. プロジェクトディレクトリに移動し、依存関係をインストール：
 
    ```bash
    pnpm install
-   # or
-   npm install
-   # or
-   yarn install
    ```
 
-3. 開発サーバーを起動:
+3. 開発サーバーを起動：
 
    ```bash
    pnpm dev
    ```
 
-## 🧱 プロジェクト構造
+![Project Structure](../assets/readme/headers/project-structure.svg)
 
 ```
 ├── public/           # 静的アセット
 ├── src/              # ソースコード
-│   ├── App.css       # グローバルスタイルとTailwindのインポート
+│   ├── App.css       # グローバルスタイルと Tailwind インポート
 │   ├── App.tsx       # メインアプリケーションコンポーネント
 │   └── index.tsx     # エントリーポイント
-├── rsbuild.config.ts # Rsbuild設定
-├── tsconfig.json     # TypeScript設定
-├── eslint.config.js  # ESLint設定
+├── rsbuild.config.ts # Rsbuild 設定
+├── tsconfig.json     # TypeScript 設定
+├── eslint.config.js  # ESLint 設定
 └── package.json      # プロジェクトの依存関係とスクリプト
 ```
 
-## 🤝 コントリビューション
+![Contributing](../assets/readme/headers/contributing.svg)
+
+コントリビュートを歓迎します！以下の手順に従ってコントリビュートしてください：
+
+1. リポジトリをフォーク
+2. 機能ブランチを作成（`git checkout -b feature/amazing-feature`）
+3. 変更をコミット（`git commit -m 'Add some amazing feature'`）
+4. ブランチにプッシュ（`git push origin feature/amazing-feature`）
+5. Pull Request を作成
 
-貢献は歓迎され、非常に高く評価されています！貢献するには以下の手順に従ってください：
+![License](../assets/readme/headers/license.svg)
 
-1. リポジトリをフォークする
-2. 機能ブランチを作成する（`git checkout -b feature/amazing-feature`）
-3. 変更をコミットする（`git commit -m 'Add some amazing feature'`）
-4. ブランチにプッシュする（`git push origin feature/amazing-feature`）
-5. Pull Requestを開く
+MIT License © 2025 Trapar Waves
 
-## 👤 Author
+## 👤 作者
 
-- **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
-- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
+- **Rikka：** [admin@rikka.cc](mailto:admin@rikka.cc)
+- **GitHub プロフィール：** [Muromi-Rikka](https://github.com/Muromi-Rikka)
 
-## 🔗 Links
+## 🔗 リンク
 
-- **リポジトリ:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
-- **ホームページ:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
-- **イシュー:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
+- **リポジトリ：** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
+- **Issues：** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)

package/readme/README-RU.md

@@ -7,49 +7,42 @@
 ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
 ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
 
+![React Tailwind](../assets/readme/hero.svg)
+
 ---
 
 [English](../README.md) | [中文](./README-CN.md) | [日本語](./README-JP.md)
 
-> Современный шаблон разработки пользовательского интерфейса, интегрирующий React и Tailwind CSS, с поддержкой Rsbuild, TypeScript, ESLint (конфигурация Antfu) и Iconify.
+> Современный шаблон разработки UI, интегрирующий React и Tailwind CSS, с поддержкой Rsbuild, TypeScript, ESLint (конфигурация Antfu) и Iconify.
 
-## ✨ Особенности
+![Features](../assets/readme/headers/features.svg)
 
-- **Современный UI-фреймворк:** Строится с использованием React (v19) для компонентно-ориентированного декларативного интерфейса.
-- **Стилизация с упором на утилиты:** Использует Tailwind CSS v4 (`tailwindcss`) вместе с `@tailwindcss/postcss`, обеспечивая гибкую и быструю стилизацию при сохранении согласованности.
-- **Быстрый рабочий процесс разработки:** Использует Rsbuild (`@rsbuild/core` и `@rsbuild/plugin-react`) для оптимизированных сборок и эффективной производительности сервера разработки.
-- **Поддержка иконок:** Включает `@iconify/json` и `@iconify/tailwind4` для масштабируемой и настраиваемой иконографии.
-- **Типовая безопасность:** Использует TypeScript (v5.9.x) для повышения надежности кода и обеспечения надежной проверки типов во время разработки.
-- **Фокус на качестве кода:** Включает ESLint с `@antfu/eslint-config` для линтинга и обеспечения лучших практик в кодовой базе.
-- **Git Hooks:** Интеграция `husky` и `lint-staged` для предварительных проверок коммитов.
+- **Современный UI фреймворк:** Построен на React (v19) для компонентно-ориентированного декларативного интерфейса.
+- **Утилитарный подход к стилям:** Использует Tailwind CSS v4 (`tailwindcss`) вместе с `@tailwindcss/postcss`, обеспечивая гибкую и быструю разработку стилей с сохранением一致性.
+- **Быстрый рабочий процесс разработки:** Использует Rsbuild (`@rsbuild/core` и `@rsbuild/plugin-react`) для оптимизированных сборок и эффективной работы сервера разработки.
+- **Поддержка иконок:** Включает `@iconify/json` и `@iconify/tailwind4` для масштабируемых и настраиваемых иконок.
+- **Типобезопасность:** Использует TypeScript (v5.9.x) для повышения надежности кода и обеспечения строгой проверки типов во время разработки.
+- **Фокус на качестве кода:** Включает ESLint с `@antfu/eslint-config` для линтинга и применения лучших практик.
+- **Git Hooks:** Интегрированы `husky` и `lint-staged` для проверок перед коммитом.
 
-## 💻 Технологический стек
+![Tech Stack](../assets/readme/headers/tech-stack.svg)
 
-- **Фреймворк/Библиотека:** React (v19)
+- **Фреймворк/библиотека:** React (v19)
 - **Стилизация:** Tailwind CSS (`tailwindcss`)
 - **Инструмент сборки:** Rsbuild (`@rsbuild/core`)
 - **Язык:** TypeScript (v5.9.x)
-- **Обработка CSS:** PostCSS with `@tailwindcss/postcss`
-- **Линтинг:** ESLint с `@antfu/eslint-config`
+- **Обработка CSS:** PostCSS и `@tailwindcss/postcss`
+- **Линтинг:** ESLint и `@antfu/eslint-config`
 - **Иконки:** Iconify (`@iconify/json`, `@iconify/tailwind4`)
 
-Полный список зависимостей см. в [package.json](../package.json).
-
-## 🚀 Начало работы
+Полный список зависимостей смотрите в [package.json](../package.json).
 
-Следуйте этим инструкциям, чтобы запустить проект локально.
+![Getting Started](../assets/readme/headers/getting-started.svg)
 
-### Предварительные требования
+## Предварительные требования
 
-Убедитесь, что у вас установлены следующие компоненты:
-
-- Node.js (рекомендуется версия >= 18.x)
-- Пакетный менеджер (npm, yarn или pnpm)
-
-```bash
-node -v
-npm -v
-```
+- Node.js (рекомендуется >= 18.x)
+- Менеджер пакетов (npm, yarn или pnpm)
 
 ### Установка
 
@@ -59,14 +52,10 @@ npm -v
    pnpm create trapar-waves
    ```
 
-2. Перейдите в каталог вашего проекта и установите зависимости:
+2. Перейдите в директорию проекта и установите зависимости:
 
    ```bash
    pnpm install
-   # or
-   npm install
-   # or
-   yarn install
    ```
 
 3. Запустите сервер разработки:
@@ -75,12 +64,12 @@ npm -v
    pnpm dev
    ```
 
-## 🧱 Структура проекта
+![Project Structure](../assets/readme/headers/project-structure.svg)
 
 ```
 ├── public/           # Статические ресурсы
 ├── src/              # Исходный код
-│   ├── App.css       # Глобальные стили и импорт Tailwind
+│   ├── App.css       # Глобальные стили и импорты Tailwind
 │   ├── App.tsx       # Основной компонент приложения
 │   └── index.tsx     # Точка входа
 ├── rsbuild.config.ts # Конфигурация Rsbuild
@@ -89,23 +78,26 @@ npm -v
 └── package.json      # Зависимости и скрипты проекта
 ```
 
-## 🤝 Участие в разработке
+![Contributing](../assets/readme/headers/contributing.svg)
 
-Вклад в проект приветствуется и очень ценится! Чтобы внести вклад, следуйте этим шагам:
+Участие приветствуется и высоко ценится! Пожалуйста, следуйте этим шагам для вклада:
 
-1. Сделайте форк репозитория
-2. Создайте ветку с функцией (`git checkout -b feature/amazing-feature`)
-3. Зафиксируйте свои изменения (`git commit -m 'Add some amazing feature'`)
+1. Fork репозиторий
+2. Создайте ветку для новой функции (`git checkout -b feature/amazing-feature`)
+3. Зафиксируйте изменения (`git commit -m 'Add some amazing feature'`)
 4. Отправьте изменения в ветку (`git push origin feature/amazing-feature`)
 5. Откройте Pull Request
 
-## 👤 Author
+![License](../assets/readme/headers/license.svg)
+
+MIT License © 2025 Trapar Waves
+
+## 👤 Автор
 
 - **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
-- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
+- **Профиль GitHub:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
 
-## 🔗 Links
+## 🔗 Ссылки
 
 - **Репозиторий:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
-- **Домашняя страница:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
-- **Проблемы:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
+- **Issues:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)

package/rsbuild.config.ts

@@ -1,8 +1,33 @@
 import { defineConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
+import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
 import tailwind from "@tailwindcss/postcss";
+import process from "node:process";
+import TurboConsole from "unplugin-turbo-console/rspack";
+
+function normalizeBasePath(): string {
+  const raw = process.env.BASE_PATH?.trim();
+  if (!raw || raw === "/") {
+    return "/";
+  }
+  const prefixed = raw.startsWith("/") ? raw : `/${raw}`;
+  return prefixed.endsWith("/") ? prefixed : `${prefixed}/`;
+}
+
+const basePath = normalizeBasePath();
+const isUseSubpath = basePath !== "/";
+
+const isEnableRsdoctor = Boolean(process.env.RSDOCTOR);
+const isEnableTurboConsole = process.env.NODE_ENV === "development";
 
 export default defineConfig({
+  ...(isUseSubpath && {
+    output: { assetPrefix: basePath },
+    server: { base: basePath },
+  }),
+  performance: {
+    ...(isEnableRsdoctor && { buildCache: false }),
+  },
   plugins: [pluginReact()],
   tools: {
     postcss: {
@@ -10,5 +35,22 @@ export default defineConfig({
         plugins: [tailwind],
       },
     },
+    rspack: {
+      plugins: [
+        ...(isEnableTurboConsole ? [TurboConsole()] : []),
+        ...(isEnableRsdoctor
+          ? [
+              new RsdoctorRspackPlugin({
+                output: {
+                  mode: "brief",
+                  options: {
+                    type: ["json"],
+                  },
+                },
+              }),
+            ]
+          : []),
+      ],
+    },
   },
 });

package/src/app.css

@@ -0,0 +1,65 @@
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@400;500;600&display=swap");
+
+@import "tailwindcss";
+@plugin "@iconify/tailwind4";
+
+@theme {
+  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
+  --font-sans: "Outfit", system-ui, sans-serif;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.skip-link {
+  position: absolute;
+  left: 0.75rem;
+  top: 0.75rem;
+  z-index: 50;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  background: #0f172a;
+  color: #f8fafc;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-decoration: none;
+  transform: translateY(-200%);
+  transition: transform 200ms ease-out;
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+  outline: 3px solid #f97316;
+  outline-offset: 2px;
+}
+
+.hero-grid {
+  background-image:
+    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+
+.trapar-tech-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(234, 88, 12, 0.2);
+  flex-shrink: 0;
+}
+
+.trapar-tech-icon span[class^="icon-"] {
+  font-size: 1.5rem;
+  line-height: 1;
+}

package/src/app.tsx

@@ -0,0 +1,167 @@
+import "./app.css";
+
+const HOMEPAGE = "https://github.com/Trapar-waves/react-tailwind";
+const LOGOS_SET_URL = "https://icon-sets.iconify.design/logos/";
+
+interface TechItem {
+  hint: string;
+  iconClass: string;
+  id: string;
+  label: string;
+}
+
+const techStack: TechItem[] = [
+  { hint: "组件驱动、声明式 UI", iconClass: "icon-[logos--react]", id: "react", label: "React 19" },
+  { hint: "静态类型与编辑器体验", iconClass: "icon-[logos--typescript-icon]", id: "ts", label: "TypeScript" },
+  { hint: "tailwindcss · @tailwindcss/postcss", iconClass: "icon-[logos--tailwindcss-icon]", id: "tailwind", label: "Tailwind CSS 4" },
+  { hint: "@rsbuild/core · @rsbuild/plugin-react", iconClass: "icon-[material-icon-theme--rstack]", id: "rsbuild", label: "Rsbuild" },
+  { hint: "@renton/eslint-config-react", iconClass: "icon-[logos--eslint]", id: "eslint", label: "ESLint" },
+  { hint: "@iconify/json · @iconify/tailwind4（含 logos）", iconClass: "icon-[logos--markdown]", id: "iconify", label: "Iconify" },
+  { hint: "包管理与 CI 缓存", iconClass: "icon-[logos--pnpm]", id: "pnpm", label: "pnpm" },
+  { hint: "本地开发与构建", iconClass: "icon-[logos--nodejs-icon]", id: "node", label: "Node.js" },
+  { hint: "Release 与 Pages 工作流", iconClass: "icon-[logos--github-icon]", id: "github", label: "GitHub Actions" },
+];
+
+const readmeFeatures: string[] = [
+  "基于 React 19 的组件化界面。",
+  "Tailwind CSS v4 与 @tailwindcss/postcss，工具类优先、易迭代。",
+  "Rsbuild 提供极速开发与优化构建。",
+  "@iconify/json 与 @iconify/tailwind4，支持 logos 等多集合矢量图标。",
+  "TypeScript 贯穿模板代码。",
+  "@renton/eslint-config-react 统一代码风格与规则。",
+  "Husky 与 lint-staged 在提交前执行检查。",
+];
+
+const readmeTechNote = "本模板未内置路由或全局状态；可按业务接入 TanStack Router、Zustand 等，与 README「扩展」章节一致。";
+
+export default function App() {
+  return (
+    <div className="min-h-dvh bg-[#faf8f5] text-slate-900 font-sans antialiased">
+      <a className="skip-link" href="#main">
+        跳到主要内容
+      </a>
+      <div className="hero-grid relative overflow-hidden border-b border-slate-200/80">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -right-24 top-0 h-72 w-72 rounded-full bg-orange-500/15 blur-3xl motion-safe:animate-[pulse_14s_ease-in-out_infinite]"
+        />
+        <header className="relative mx-auto max-w-5xl px-6 pb-16 pt-14 sm:px-10 sm:pb-20 sm:pt-20">
+          <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-orange-700">
+            Trapar-waves / react-tailwind
+          </p>
+          <h1 className="mt-4 max-w-3xl font-display text-4xl font-normal leading-tight text-slate-950 sm:text-5xl">
+            Rsbuild、React 19 与 Tailwind CSS 4 的轻量起点
+          </h1>
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-600">
+            本页结合 README 特性与
+            {" "}
+            <a
+              className="font-semibold text-orange-800 underline decoration-orange-300 underline-offset-2 hover:text-orange-950"
+              href={LOGOS_SET_URL}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Iconify logos
+            </a>
+            {" "}
+            集合展示技术栈；保留 @theme 字体、跳过链接与减少动效等可访问实践。
+          </p>
+          <div className="mt-10 flex flex-wrap items-center gap-4">
+            <a
+              className="inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-slate-900 px-8 py-3 text-sm font-semibold text-white shadow-lg shadow-slate-900/15 transition hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500"
+              href={HOMEPAGE}
+            >
+              查看模板仓库
+            </a>
+            <span aria-hidden className="icon-[logos--react] text-3xl text-sky-700" />
+            <span aria-hidden className="icon-[logos--tailwindcss-icon] text-3xl text-cyan-700" />
+            <span aria-hidden className="icon-[material-icon-theme--rstack] text-3xl text-amber-800" />
+          </div>
+        </header>
+      </div>
+
+      <main className="mx-auto max-w-5xl px-6 py-14 sm:px-10" id="main">
+        <h2 className="font-display text-2xl text-slate-900">技术栈一览</h2>
+        <p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-600">
+          Rsbuild 与 Rspack 生态相关示意使用
+          {" "}
+          <code className="rounded bg-slate-200/80 px-1.5 py-0.5 text-slate-800">material-icon-theme--rstack</code>
+          ；图标集说明见上文链接。
+        </p>
+        <ul className="mt-8 grid list-none gap-4 p-0 sm:grid-cols-2 lg:grid-cols-3">
+          {techStack.map(item => (
+            <li
+              className="flex gap-4 rounded-2xl border border-slate-200/90 bg-white p-5 shadow-sm"
+              key={item.id}
+            >
+              <div aria-hidden className="trapar-tech-icon">
+                <span className={item.iconClass} />
+              </div>
+              <div>
+                <h3 className="text-base font-semibold text-slate-900">{item.label}</h3>
+                <p className="mt-1 text-sm leading-snug text-slate-600">{item.hint}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+
+        <h2 className="font-display mt-14 text-2xl text-slate-900">README 特性摘要</h2>
+        <ul className="mt-4 max-w-3xl list-disc space-y-2 pl-5 text-slate-700">
+          {readmeFeatures.map(line => (
+            <li key={line}>{line}</li>
+          ))}
+        </ul>
+        <p className="mt-4 max-w-3xl text-sm italic text-slate-600">{readmeTechNote}</p>
+
+        <section aria-labelledby="a11y-heading" className="mt-12 rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm">
+          <h2 className="font-display text-xl text-slate-900" id="a11y-heading">
+            图标与可访问性
+          </h2>
+          <p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-600">
+            装饰性技术标识使用 Iconify
+            <code className="mx-1 rounded bg-slate-100 px-1">logos</code>
+            集合的矢量类名（与源码中实际 slug 一致），并配合
+            <span className="font-medium text-slate-800"> aria-hidden</span>
+            ；主操作区保持约 44px 触控高度与可见焦点环；系统开启「减少动态效果」时装饰动画会缩短。
+          </p>
+          <div className="mt-4 flex flex-wrap gap-3">
+            <span aria-hidden className="icon-[logos--eslint] text-3xl text-purple-800" />
+            <span aria-hidden className="icon-[logos--typescript-icon] text-3xl text-blue-800" />
+            <span aria-hidden className="icon-[logos--github-icon] text-3xl text-slate-800" />
+          </div>
+        </section>
+
+        <h2 className="font-display mt-14 text-2xl text-slate-900">界面骨架示例</h2>
+        <ul className="mt-8 grid gap-6 sm:grid-cols-2">
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">Tailwind 4 + PostCSS</h3>
+            <p className="mt-2 text-slate-600">
+              使用 @theme 扩展字体族，配合 @utility 与任意值快速迭代布局与间距体系。
+            </p>
+          </li>
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">Iconify 图标</h3>
+            <p className="mt-2 text-slate-600">
+              通过 @iconify/tailwind4 以原子类方式引用多集合矢量图标，避免 emoji 替代图标。
+            </p>
+          </li>
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">可访问与动效</h3>
+            <p className="mt-2 text-slate-600">
+              首跳链接、可见焦点环，以及在 prefers-reduced-motion 下弱化装饰性动画。
+            </p>
+          </li>
+          <li className="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm transition hover:border-orange-200 hover:shadow-md">
+            <h3 className="text-lg font-semibold text-slate-900">GitHub Pages</h3>
+            <p className="mt-2 text-slate-600">
+              通过 BASE_PATH 子路径构建，在推送版本标签时由 Actions 发布静态站点。
+            </p>
+          </li>
+        </ul>
+      </main>
+      <footer className="border-t border-slate-200/80 bg-white/80 py-8 text-center text-sm text-slate-500">
+        MIT · Trapar-waves · 图标致谢 Iconify logos（CC0）
+      </footer>
+    </div>
+  );
+}

package/src/index.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import * as React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import App from "./app";
 
-const rootEl = document.getElementById("root");
-if (rootEl) {
-  const root = ReactDOM.createRoot(rootEl);
+const rootElement = document.querySelector("#root");
+if (rootElement) {
+  const root = ReactDOM.createRoot(rootElement);
   root.render(
     <React.StrictMode>
       <App />

package/src/App.css

@@ -1,2 +0,0 @@
-@import 'tailwindcss';
-@plugin "@iconify/tailwind4";

package/src/App.tsx

@@ -1,13 +0,0 @@
-import "./App.css";
-
-function App() {
-  return (
-    <div className="bg-red-200">
-      <h1 className="text-green-800">Rsbuild with React</h1>
-      <p>Start building amazing things with Rsbuild.</p>
-      <span className="icon-[cryptocurrency--btc]"></span>
-    </div>
-  );
-}
-
-export default App;