npm - @trapar-waves/react-tailwind - Versions diffs - 1.1.23 → 2.0.0 - Mend

@trapar-waves/react-tailwind 1.1.23 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +27 -19
package/assets/readme/headers/contributing.svg +27 -0
package/assets/readme/headers/features.svg +27 -0
package/assets/readme/headers/getting-started.svg +27 -0
package/assets/readme/headers/license.svg +27 -0
package/assets/readme/headers/project-structure.svg +27 -0
package/assets/readme/headers/tech-stack.svg +27 -0
package/assets/readme/hero.svg +100 -0
package/eslint.config.js +7 -9
package/lint-staged.config.js +1 -1
package/package.json +24 -20
package/pnpm-workspace.yaml +6 -0
package/readme/README-CN.md +49 -57
package/readme/README-JP.md +49 -57
package/readme/README-RU.md +36 -44
package/rsbuild.config.ts +42 -0
package/src/app.css +65 -0
package/src/app.tsx +167 -0
package/src/index.tsx +5 -5
package/src/App.css +0 -2
package/src/App.tsx +0 -13
/package/src/{env.d.ts → environment.d.ts} +0 -0

package/README.md CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/readme/README-CN.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 DELETED Viewed

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

package/src/App.tsx DELETED Viewed

@@ -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;

/package/src/{env.d.ts → environment.d.ts} RENAMED Viewed

File without changes