@trapar-waves/react-tailwind 1.2.0 → 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 (20) hide show
  1. package/README.md +11 -19
  2. package/assets/readme/headers/contributing.svg +27 -0
  3. package/assets/readme/headers/features.svg +27 -0
  4. package/assets/readme/headers/getting-started.svg +27 -0
  5. package/assets/readme/headers/license.svg +27 -0
  6. package/assets/readme/headers/project-structure.svg +27 -0
  7. package/assets/readme/headers/tech-stack.svg +27 -0
  8. package/assets/readme/hero.svg +100 -0
  9. package/eslint.config.js +3 -11
  10. package/lint-staged.config.js +1 -1
  11. package/package.json +18 -18
  12. package/pnpm-workspace.yaml +2 -0
  13. package/readme/README-CN.md +49 -57
  14. package/readme/README-JP.md +49 -57
  15. package/readme/README-RU.md +36 -44
  16. package/rsbuild.config.ts +11 -13
  17. package/src/{App.tsx → app.tsx} +30 -32
  18. package/src/index.tsx +4 -4
  19. /package/src/{App.css → app.css} +0 -0
  20. /package/src/{env.d.ts → environment.d.ts} +0 -0
package/README.md CHANGED
@@ -7,13 +7,15 @@
7
7
  ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
8
  ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
9
9
 
10
+ ![React Tailwind](assets/readme/hero.svg)
11
+
10
12
  ---
11
13
 
12
14
  [中文](./readme/README-CN.md) | [日本語](./readme/README-JP.md) | [Русский язык](./readme/README-RU.md)
13
15
 
14
16
  > A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.
15
17
 
16
- ## ✨ Features
18
+ ![Features](assets/readme/headers/features.svg)
17
19
 
18
20
  - **Modern UI Framework:** Built using React (v19) for a component-driven, declarative interface.
19
21
  - **Utility-First Styling:** Employs Tailwind CSS v4 (`tailwindcss`) along with `@tailwindcss/postcss`, enabling flexible and rapid styling while maintaining consistency.
@@ -39,7 +41,7 @@ PowerShell:
39
41
  $env:BASE_PATH="/react-tailwind/"; pnpm run build; pnpm preview
40
42
  ```
41
43
 
42
- ## 💻 Tech Stack
44
+ ![Tech Stack](assets/readme/headers/tech-stack.svg)
43
45
 
44
46
  - **Framework/Library:** React (v19)
45
47
  - **Styling:** Tailwind CSS (`tailwindcss`)
@@ -51,22 +53,13 @@ $env:BASE_PATH="/react-tailwind/"; pnpm run build; pnpm preview
51
53
 
52
54
  See the [package.json](./package.json) for a full list of dependencies.
53
55
 
54
- ## 🚀 Getting Started
55
-
56
- Follow these instructions to get the project running locally.
56
+ ![Getting Started](assets/readme/headers/getting-started.svg)
57
57
 
58
58
  ### Prerequisites
59
59
 
60
- Ensure you have the following installed:
61
-
62
60
  - Node.js (>= 18.x recommended)
63
61
  - Package manager (npm, yarn, or pnpm)
64
62
 
65
- ```bash
66
- node -v
67
- npm -v
68
- ```
69
-
70
63
  ### Installation
71
64
 
72
65
  1. Create a new project using the template:
@@ -79,10 +72,6 @@ npm -v
79
72
 
80
73
  ```bash
81
74
  pnpm install
82
- # or
83
- npm install
84
- # or
85
- yarn install
86
75
  ```
87
76
 
88
77
  3. Start the development server:
@@ -91,7 +80,7 @@ npm -v
91
80
  pnpm dev
92
81
  ```
93
82
 
94
- ## 🧱 Project Structure
83
+ ![Project Structure](assets/readme/headers/project-structure.svg)
95
84
 
96
85
  ```
97
86
  ├── public/ # Static assets
@@ -105,7 +94,7 @@ npm -v
105
94
  └── package.json # Project dependencies and scripts
106
95
  ```
107
96
 
108
- ## 🤝 Contributing
97
+ ![Contributing](assets/readme/headers/contributing.svg)
109
98
 
110
99
  Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
111
100
 
@@ -115,6 +104,10 @@ Contributions are welcome and greatly appreciated! Please follow these steps to
115
104
  4. Push to the branch (`git push origin feature/amazing-feature`)
116
105
  5. Open a Pull Request
117
106
 
107
+ ![License](assets/readme/headers/license.svg)
108
+
109
+ MIT License © 2025 Trapar Waves
110
+
118
111
  ## 👤 Author
119
112
 
120
113
  - **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
@@ -123,5 +116,4 @@ Contributions are welcome and greatly appreciated! Please follow these steps to
123
116
  ## 🔗 Links
124
117
 
125
118
  - **Repository:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
126
- - **Homepage:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
127
119
  - **Issues:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
package/assets/readme/headers/contributing.svg ADDED
@@ -0,0 +1,27 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Contributing section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-contrib" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+
10
+ <!-- Background (opaque) -->
11
+ <rect width="1200" height="80" fill="#FFFFFF"/>
12
+ <rect width="1200" height="80" fill="url(#bg-contrib)"/>
13
+
14
+ <!-- Border -->
15
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
16
+
17
+ <!-- Bottom accent -->
18
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
19
+
20
+ <!-- Emoji -->
21
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">🤝</text>
22
+
23
+ <!-- Title -->
24
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
25
+ Contributing
26
+ </text>
27
+ </svg>
package/assets/readme/headers/features.svg ADDED
@@ -0,0 +1,27 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Features section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-features" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+
10
+ <!-- Background (opaque) -->
11
+ <rect width="1200" height="80" fill="#FFFFFF"/>
12
+ <rect width="1200" height="80" fill="url(#bg-features)"/>
13
+
14
+ <!-- Border -->
15
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
16
+
17
+ <!-- Bottom accent -->
18
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
19
+
20
+ <!-- Emoji -->
21
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">✨</text>
22
+
23
+ <!-- Title -->
24
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
25
+ Features
26
+ </text>
27
+ </svg>
package/assets/readme/headers/getting-started.svg ADDED
@@ -0,0 +1,27 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Getting Started section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-start" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+
10
+ <!-- Background (opaque) -->
11
+ <rect width="1200" height="80" fill="#FFFFFF"/>
12
+ <rect width="1200" height="80" fill="url(#bg-start)"/>
13
+
14
+ <!-- Border -->
15
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
16
+
17
+ <!-- Bottom accent -->
18
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
19
+
20
+ <!-- Emoji -->
21
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">🚀</text>
22
+
23
+ <!-- Title -->
24
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
25
+ Getting Started
26
+ </text>
27
+ </svg>
package/assets/readme/headers/license.svg ADDED
@@ -0,0 +1,27 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>License section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-license" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+
10
+ <!-- Background (opaque) -->
11
+ <rect width="1200" height="80" fill="#FFFFFF"/>
12
+ <rect width="1200" height="80" fill="url(#bg-license)"/>
13
+
14
+ <!-- Border -->
15
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
16
+
17
+ <!-- Bottom accent -->
18
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
19
+
20
+ <!-- Emoji -->
21
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">📄</text>
22
+
23
+ <!-- Title -->
24
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
25
+ License
26
+ </text>
27
+ </svg>
package/assets/readme/headers/project-structure.svg ADDED
@@ -0,0 +1,27 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Project Structure section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-struct" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+
10
+ <!-- Background (opaque) -->
11
+ <rect width="1200" height="80" fill="#FFFFFF"/>
12
+ <rect width="1200" height="80" fill="url(#bg-struct)"/>
13
+
14
+ <!-- Border -->
15
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
16
+
17
+ <!-- Bottom accent -->
18
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
19
+
20
+ <!-- Emoji -->
21
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">📁</text>
22
+
23
+ <!-- Title -->
24
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
25
+ Project Structure
26
+ </text>
27
+ </svg>
package/assets/readme/headers/tech-stack.svg ADDED
@@ -0,0 +1,27 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 80" width="100%">
2
+ <title>Tech Stack section header</title>
3
+ <defs>
4
+ <linearGradient id="bg-tech" x1="0%" y1="0%" x2="100%" y2="0%">
5
+ <stop offset="0%" style="stop-color:#06B6D4;stop-opacity:0.15"/>
6
+ <stop offset="100%" style="stop-color:#06B6D4;stop-opacity:0.08"/>
7
+ </linearGradient>
8
+ </defs>
9
+
10
+ <!-- Background (opaque) -->
11
+ <rect width="1200" height="80" fill="#FFFFFF"/>
12
+ <rect width="1200" height="80" fill="url(#bg-tech)"/>
13
+
14
+ <!-- Border -->
15
+ <rect x="0.5" y="0.5" width="1199" height="79" rx="8" ry="8" fill="none" stroke="#E2E8F0" stroke-width="1"/>
16
+
17
+ <!-- Bottom accent -->
18
+ <rect x="0" y="76" width="1200" height="4" rx="2" fill="#06B6D4"/>
19
+
20
+ <!-- Emoji -->
21
+ <text x="40" y="52" font-family="system-ui, sans-serif" font-size="36">💻</text>
22
+
23
+ <!-- Title -->
24
+ <text x="90" y="54" font-family="system-ui, sans-serif" font-size="28" font-weight="bold" fill="#0F172A">
25
+ Tech Stack
26
+ </text>
27
+ </svg>
package/assets/readme/hero.svg ADDED
@@ -0,0 +1,100 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 450" width="100%">
2
+ <title>React Tailwind - Modern React + Tailwind CSS starter template</title>
3
+ <defs>
4
+ <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
5
+ <stop offset="0%" style="stop-color:#F8FAFC"/>
6
+ <stop offset="100%" style="stop-color:#F1F5F9"/>
7
+ </linearGradient>
8
+ <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
9
+ <circle cx="1" cy="1" r="0.5" fill="#E2E8F0" opacity="0.5"/>
10
+ </pattern>
11
+ </defs>
12
+
13
+ <!-- Background -->
14
+ <rect width="1200" height="450" fill="url(#bg)"/>
15
+ <rect width="1200" height="450" fill="url(#grid)"/>
16
+
17
+ <!-- Left side: Project identity (40%) -->
18
+ <g transform="translate(60, 60)">
19
+ <!-- Organization name -->
20
+ <text x="0" y="30" font-family="ui-monospace, monospace" font-size="18" fill="#64748B">
21
+ trapar-waves
22
+ </text>
23
+
24
+ <!-- Repository name -->
25
+ <text x="0" y="90" font-family="system-ui, sans-serif" font-size="64" font-weight="bold" fill="#06B6D4">
26
+ react-tailwind
27
+ </text>
28
+
29
+ <!-- Description -->
30
+ <text x="0" y="140" font-family="system-ui, sans-serif" font-size="24" fill="#475569">
31
+ Modern React + Tailwind CSS
32
+ </text>
33
+ <text x="0" y="175" font-family="system-ui, sans-serif" font-size="24" fill="#475569">
34
+ starter template
35
+ </text>
36
+ </g>
37
+
38
+ <!-- Right side: Feature cards (60%) -->
39
+ <g transform="translate(520, 60)">
40
+ <!-- Card 1: Fast Dev -->
41
+ <g transform="translate(0, 0)">
42
+ <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
43
+ <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">⚡</text>
44
+ <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
45
+ Fast Dev
46
+ </text>
47
+ <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
48
+ Rsbuild hot reload
49
+ </text>
50
+ <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
51
+ for instant feedback
52
+ </text>
53
+ </g>
54
+
55
+ <!-- Card 2: Tailwind CSS -->
56
+ <g transform="translate(310, 0)">
57
+ <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
58
+ <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">🎨</text>
59
+ <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
60
+ Tailwind CSS
61
+ </text>
62
+ <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
63
+ Utility-first styling
64
+ </text>
65
+ <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
66
+ for rapid development
67
+ </text>
68
+ </g>
69
+
70
+ <!-- Card 3: Type Safe -->
71
+ <g transform="translate(0, 160)">
72
+ <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
73
+ <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">🔧</text>
74
+ <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
75
+ Type Safe
76
+ </text>
77
+ <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
78
+ TypeScript support
79
+ </text>
80
+ <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
81
+ for reliable code
82
+ </text>
83
+ </g>
84
+
85
+ <!-- Card 4: Modern -->
86
+ <g transform="translate(310, 160)">
87
+ <rect width="280" height="140" rx="12" fill="white" stroke="#E2E8F0" stroke-width="1"/>
88
+ <text x="24" y="45" font-family="system-ui, sans-serif" font-size="36">📦</text>
89
+ <text x="70" y="45" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#1E293B">
90
+ Modern
91
+ </text>
92
+ <text x="24" y="85" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
93
+ React 19 + latest
94
+ </text>
95
+ <text x="24" y="110" font-family="system-ui, sans-serif" font-size="16" fill="#64748B">
96
+ toolchain
97
+ </text>
98
+ </g>
99
+ </g>
100
+ </svg>
package/eslint.config.js CHANGED
@@ -1,21 +1,13 @@
1
- import antfu from "@antfu/eslint-config";
1
+ import { rentonReact } from "@renton/eslint-config-react";
2
2
 
3
- export default antfu({
3
+ export default rentonReact({
4
4
  stylistic: {
5
5
  quotes: "double",
6
6
  semi: true,
7
7
  },
8
- markdown: true,
9
- jsonc: true,
10
- typescript: true,
11
- yaml: true,
12
- react: true,
13
- formatters: {
14
- markdown: "prettier",
15
- },
16
8
  }, {
17
- name: "trapar/pnpm-workspace-yaml-trust-policy",
18
9
  files: ["pnpm-workspace.yaml"],
10
+ name: "trapar/pnpm-workspace-yaml-trust-policy",
19
11
  rules: {
20
12
  "pnpm/yaml-enforce-settings": "off",
21
13
  },
package/lint-staged.config.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @filename: lint-staged.config.js
2
+ * @file lint-staged.config.js
3
3
  * @type {import('lint-staged').Configuration}
4
4
  */
5
5
  export default {
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@trapar-waves/react-tailwind",
3
3
  "type": "module",
4
- "version": "1.2.0",
5
- "packageManager": "pnpm@10.33.2",
4
+ "version": "2.0.0",
5
+ "packageManager": "pnpm@11.24.0",
6
6
  "description": "A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.",
7
7
  "author": {
8
8
  "email": "admin@rikka.cc",
@@ -38,29 +38,29 @@
38
38
  "postinstall": "husky"
39
39
  },
40
40
  "dependencies": {
41
- "react": "^19.2.5",
42
- "react-dom": "^19.2.5"
41
+ "react": "^19.2.8",
42
+ "react-dom": "^19.2.8"
43
43
  },
44
44
  "devDependencies": {
45
- "@antfu/eslint-config": "^8.2.0",
46
- "@eslint-react/eslint-plugin": "^3.0.0",
47
- "@iconify/json": "^2.2.467",
45
+ "@eslint-react/eslint-plugin": "^5.18.6",
46
+ "@iconify/json": "^2.2.522",
48
47
  "@iconify/tailwind4": "^1.2.3",
49
- "@rsbuild/core": "^2.0.1",
50
- "@rsbuild/plugin-react": "^2.0.0",
51
- "@rsdoctor/rspack-plugin": "^1.5.9",
52
- "@tailwindcss/postcss": "^4.2.4",
53
- "@types/react": "^19.2.14",
54
- "@types/react-dom": "^19.2.3",
48
+ "@renton/eslint-config-react": "^1.0.0",
49
+ "@rsbuild/core": "^2.2.1",
50
+ "@rsbuild/plugin-react": "^2.1.0",
51
+ "@rsdoctor/rspack-plugin": "^1.6.3",
52
+ "@tailwindcss/postcss": "^4.3.3",
53
+ "@types/react": "^19.2.18",
54
+ "@types/react-dom": "^19.2.5",
55
55
  "cross-env": "^10.1.0",
56
- "eslint": "^10.2.1",
56
+ "eslint": "^10.9.1",
57
57
  "eslint-plugin-format": "^2.0.1",
58
58
  "eslint-plugin-react-hooks": "^7.1.1",
59
- "eslint-plugin-react-refresh": "^0.5.2",
59
+ "eslint-plugin-react-refresh": "^0.5.5",
60
60
  "husky": "^9.1.7",
61
- "lint-staged": "^16.4.0",
62
- "tailwindcss": "^4.2.4",
61
+ "lint-staged": "^17.4.1",
62
+ "tailwindcss": "^4.3.3",
63
63
  "typescript": "^6.0.3",
64
- "unplugin-turbo-console": "^2.3.1"
64
+ "unplugin-turbo-console": "^2.3.3"
65
65
  }
66
66
  }
package/pnpm-workspace.yaml CHANGED
@@ -1,3 +1,5 @@
1
+ minimumReleaseAge: 0
2
+
1
3
  shellEmulator: true
2
4
 
3
5
  trustPolicy: off
package/readme/README-CN.md CHANGED
@@ -7,105 +7,97 @@
7
7
  ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
8
  ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
9
9
 
10
+ ![React Tailwind](../assets/readme/hero.svg)
11
+
10
12
  ---
11
13
 
12
14
  [English](../README.md) | [日本語](./README-JP.md) | [Русский язык](./README-RU.md)
13
15
 
14
- > 一个现代UI开发模板，集成了React和Tailwind CSS，以及Rsbuild、TypeScript、ESLint (Antfu config)和Iconify支持。
15
-
16
- ## ✨ 特性
16
+ > 一个现代化的 UI 开发模板，集成了 React 和 Tailwind CSS，配合 Rsbuild、TypeScript、ESLint（Antfu 配置）和 Iconify 支持。
17
17
 
18
- - **现代UI框架:** 使用React (v19)构建组件驱动的声明式界面。
19
- - **实用优先的样式:** 采用Tailwind CSS v4 (`tailwindcss`)和`@tailwindcss/postcss`，实现灵活快速的样式设计，同时保持一致性。
20
- - **快速开发工作流:** 使用Rsbuild（`@rsbuild/core`和`@rsbuild/plugin-react`）实现优化构建和高效开发服务器性能。
21
- - **图标支持:** 包含`@iconify/json`和`@iconify/tailwind4`，提供可扩展和可定制的图标。
22
- - **类型安全:** 使用TypeScript (v5.9.x)增强代码可靠性，并在开发过程中提供强大的类型检查。
23
- - **注重代码质量:** 包含ESLint和`@antfu/eslint-config`，用于代码 linting 和执行最佳实践。
24
- - **Git Hooks:** 集成`husky`和`lint-staged`用于提交前检查。
18
+ ![Features](../assets/readme/headers/features.svg)
25
19
 
26
- ## 💻 技术栈
20
+ - **现代 UI 框架：** 使用 React (v19) 构建，支持组件驱动的声明式接口。
21
+ - **实用优先的样式：** 采用 Tailwind CSS v4（`tailwindcss`）和 `@tailwindcss/postcss`，实现灵活快速的样式开发，同时保持一致性。
22
+ - **快速开发工作流：** 使用 Rsbuild（`@rsbuild/core` 和 `@rsbuild/plugin-react`）进行优化构建和高效开发服务器性能。
23
+ - **图标支持：** 包含 `@iconify/json` 和 `@iconify/tailwind4`，提供可扩展和可定制的图标。
24
+ - **类型安全：** 利用 TypeScript (v5.9.x) 提高代码可靠性，并在开发过程中提供强大的类型检查。
25
+ - **代码质量：** 包含 ESLint 和 `@antfu/eslint-config` 进行代码检查和最佳实践 enforcement。
26
+ - **Git Hooks：** 集成 `husky` 和 `lint-staged` 进行提交前检查。
27
27
 
28
- - **框架/库:** React (v19)
29
- - **样式:** Tailwind CSS (`tailwindcss`)
30
- - **构建工具:** Rsbuild (`@rsbuild/core`)
31
- - **语言:** TypeScript (v5.9.x)
32
- - **CSS处理:** PostCSS with `@tailwindcss/postcss`
33
- - **代码检查:** ESLint与`@antfu/eslint-config`
34
- - **图标库:** Iconify (`@iconify/json`, `@iconify/tailwind4`)
28
+ ![Tech Stack](../assets/readme/headers/tech-stack.svg)
35
29
 
36
- 完整依赖列表参见[package.json](../package.json)。
30
+ - **框架/库：** React (v19)
31
+ - **样式：** Tailwind CSS (`tailwindcss`)
32
+ - **构建工具：** Rsbuild (`@rsbuild/core`)
33
+ - **语言：** TypeScript (v5.9.x)
34
+ - **CSS 处理：** PostCSS 和 `@tailwindcss/postcss`
35
+ - **代码检查：** ESLint 和 `@antfu/eslint-config`
36
+ - **图标：** Iconify (`@iconify/json`, `@iconify/tailwind4`)
37
37
 
38
- ## 🚀 开始使用
38
+ 查看 [package.json](../package.json) 获取完整的依赖列表。
39
39
 
40
- 按照以下说明在本地运行项目。
40
+ ![Getting Started](../assets/readme/headers/getting-started.svg)
41
41
 
42
- ### 前提条件
42
+ ## 前置条件
43
43
 
44
- 确保已安装以下软件：
44
+ - Node.js（推荐 >= 18.x）
45
+ - 包管理器（npm、yarn 或 pnpm）
45
46
 
46
- - Node.js (推荐 >= 18.x 版本)
47
- - 包管理器 (npm, yarn 或 pnpm)
48
-
49
- ```bash
50
- node -v
51
- npm -v
52
- ```
47
+ ### 安装
53
48
 
54
- ### 安装步骤
55
-
56
- 1. 使用模板创建新项目:
49
+ 1. 使用模板创建新项目：
57
50
 
58
51
  ```bash
59
52
  pnpm create trapar-waves
60
53
  ```
61
54
 
62
- 2. 导航到项目目录并安装依赖:
55
+ 2. 导航到项目目录并安装依赖：
63
56
 
64
57
  ```bash
65
58
  pnpm install
66
- # or
67
- npm install
68
- # or
69
- yarn install
70
59
  ```
71
60
 
72
- 3. 启动开发服务器:
61
+ 3. 启动开发服务器：
73
62
 
74
63
  ```bash
75
64
  pnpm dev
76
65
  ```
77
66
 
78
- ## 🧱 项目结构
67
+ ![Project Structure](../assets/readme/headers/project-structure.svg)
79
68
 
80
69
  ```
81
70
  ├── public/ # 静态资源
82
71
  ├── src/ # 源代码
83
- │ ├── App.css # 全局样式和Tailwind导入
72
+ │ ├── App.css # 全局样式和 Tailwind 导入
84
73
  │ ├── App.tsx # 主应用组件
85
74
  │ └── index.tsx # 入口点
86
- ├── rsbuild.config.ts # Rsbuild配置
87
- ├── tsconfig.json # TypeScript配置
88
- ├── eslint.config.js # ESLint配置
75
+ ├── rsbuild.config.ts # Rsbuild 配置
76
+ ├── tsconfig.json # TypeScript 配置
77
+ ├── eslint.config.js # ESLint 配置
89
78
  └── package.json # 项目依赖和脚本
90
79
  ```
91
80
 
92
- ## 🤝 贡献指南
81
+ ![Contributing](../assets/readme/headers/contributing.svg)
93
82
 
94
- 欢迎贡献，非常感谢您的支持！请按照以下步骤进行贡献：
83
+ 欢迎贡献，非常感谢！请按照以下步骤贡献：
95
84
 
96
- 1. Fork 本仓库
97
- 2. 创建功能分支（`git checkout -b feature/amazing-feature`）
98
- 3. 提交您的更改（`git commit -m 'Add some amazing feature'`）
85
+ 1. Fork 仓库
86
+ 2. 创建特性分支（`git checkout -b feature/amazing-feature`）
87
+ 3. 提交更改（`git commit -m 'Add some amazing feature'`）
99
88
  4. 推送到分支（`git push origin feature/amazing-feature`）
100
- 5. 打开Pull Request
89
+ 5. 创建 Pull Request
90
+
91
+ ![License](../assets/readme/headers/license.svg)
92
+
93
+ MIT License © 2025 Trapar Waves
101
94
 
102
- ## 👤 Author
95
+ ## 👤 作者
103
96
 
104
- - **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
105
- - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
97
+ - **Rikka：** [admin@rikka.cc](mailto:admin@rikka.cc)
98
+ - **GitHub 主页：** [Muromi-Rikka](https://github.com/Muromi-Rikka)
106
99
 
107
- ## 🔗 Links
100
+ ## 🔗 链接
108
101
 
109
- - **仓库:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
110
- - **主页:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
111
- - **问题:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
102
+ - **仓库：** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
103
+ - **Issues：** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
package/readme/README-JP.md CHANGED
@@ -7,105 +7,97 @@
7
7
  ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
8
  ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
9
9
 
10
+ ![React Tailwind](../assets/readme/hero.svg)
11
+
10
12
  ---
11
13
 
12
14
  [English](../README.md) | [中文](./README-CN.md) | [Русский язык](./README-RU.md)
13
15
 
14
- > ReactとTailwind CSSを統合したモダンなUI開発テンプレート。Rsbuild、TypeScript、ESLint (Antfu config)、Iconifyをサポート。
15
-
16
- ## ✨ 特徴
16
+ > React と Tailwind CSS を統合したモダンな UI 開発テンプレート。Rsbuild、TypeScript、ESLint（Antfu 設定）、Iconify サポート付き。
17
17
 
18
- - **モダンUIフレームワーク:** コンポーネント駆動の宣言型インターフェースのためにReact (v19)を使用して構築されています。
19
- - **ユーティリティファーストのスタイリング:** Tailwind CSS v4 (`tailwindcss`)と`@tailwindcss/postcss`を採用し、一貫性を維持しながら柔軟で迅速なスタイリングを可能にします。
20
- - **高速開発ワークフロー:** Rsbuild（`@rsbuild/core`と`@rsbuild/plugin-react`）を使用して最適化されたビルドと効率的な開発サーバーパフォーマンスを実現します。
21
- - **アイコンサポート:** `@iconify/json`と`@iconify/tailwind4`を含み、スケーラブルでカスタマイズ可能なアイコンを提供します。
22
- - **型安全性:** TypeScript (v5.9.x)を使用してコードの信頼性を向上させ、開発中に堅牢な型チェックを提供します。
23
- - **コード品質への焦点:** ESLintと`@antfu/eslint-config`を含み、コードベースのリンティングとベストプラクティスの適用を実現します。
24
- - **Git フック:** `husky`と`lint-staged`を統合し、コミット前のチェックを実施します。
18
+ ![Features](../assets/readme/headers/features.svg)
25
19
 
26
- ## 💻 技術スタック
20
+ - **モダン UI フレームワーク：** React (v19) を使用したコンポーネント駆動の宣言的インターフェース。
21
+ - **ユーティリティファーストのスタイリング：** Tailwind CSS v4（`tailwindcss`）と `@tailwindcss/postcss` を採用し、柔軟で迅速なスタイリングを実現しながら一貫性を維持。
22
+ - **高速開発ワークフロー：** Rsbuild（`@rsbuild/core` と `@rsbuild/plugin-react`）を使用し、最適化されたビルドと効率的な開発サーバー性能を実現。
23
+ - **アイコンサポート：** `@iconify/json` と `@iconify/tailwind4` を含み、スケーラブルでカスタマイズ可能なアイコンを提供。
24
+ - **型安全性：** TypeScript (v5.9.x) を活用し、コードの信頼性を向上させ、開発中に堅牢な型チェックを提供。
25
+ - **コード品質：** ESLint と `@antfu/eslint-config` を含み、リントとベストプラクティスの適用を強制。
26
+ - **Git Hooks：** `husky` と `lint-staged` を統合し、コミット前チェックを実行。
27
27
 
28
- - **フレームワーク/ライブラリ:** React (v19)
29
- - **スタイリング:** Tailwind CSS (`tailwindcss`)
30
- - **ビルドツール:** Rsbuild (`@rsbuild/core`)
31
- - **言語:** TypeScript (v5.9.x)
32
- - **CSS処理:** PostCSS with `@tailwindcss/postcss`
33
- - **リンティング:** `@antfu/eslint-config`を備えたESLint
34
- - **アイコン:** Iconify (`@iconify/json`, `@iconify/tailwind4`)
28
+ ![Tech Stack](../assets/readme/headers/tech-stack.svg)
35
29
 
36
- 依存関係の完全なリストについては[package.json](../package.json)を参照してください。
30
+ - **フレームワーク/ライブラリ：** React (v19)
31
+ - **スタイリング：** Tailwind CSS (`tailwindcss`)
32
+ - **ビルドツール：** Rsbuild (`@rsbuild/core`)
33
+ - **言語：** TypeScript (v5.9.x)
34
+ - **CSS 処理：** PostCSS と `@tailwindcss/postcss`
35
+ - **リント：** ESLint と `@antfu/eslint-config`
36
+ - **アイコン：** Iconify (`@iconify/json`, `@iconify/tailwind4`)
37
37
 
38
- ## 🚀 始め方
38
+ 依存関係の完全なリストは [package.json](../package.json) を参照してください。
39
39
 
40
- 以下の手順に従ってプロジェクトをローカルで実行してください。
40
+ ![Getting Started](../assets/readme/headers/getting-started.svg)
41
41
 
42
- ### 前提条件
42
+ ## 前提条件
43
43
 
44
- 以下がインストールされていることを確認してください：
45
-
46
- - Node.js (推奨バージョン >= 18.x)
47
- - パッケージマネージャー (npm, yarn または pnpm)
48
-
49
- ```bash
50
- node -v
51
- npm -v
52
- ```
44
+ - Node.js（>= 18.x 推奨）
45
+ - パッケージマネージャー（npm、yarn、または pnpm）
53
46
 
54
47
  ### インストール
55
48
 
56
- 1. テンプレートを使用して新しいプロジェクトを作成:
49
+ 1. テンプレートを使用して新しいプロジェクトを作成：
57
50
 
58
51
  ```bash
59
52
  pnpm create trapar-waves
60
53
  ```
61
54
 
62
- 2. プロジェクトディレクトリに移動し、依存関係をインストール:
55
+ 2. プロジェクトディレクトリに移動し、依存関係をインストール：
63
56
 
64
57
  ```bash
65
58
  pnpm install
66
- # or
67
- npm install
68
- # or
69
- yarn install
70
59
  ```
71
60
 
72
- 3. 開発サーバーを起動:
61
+ 3. 開発サーバーを起動：
73
62
 
74
63
  ```bash
75
64
  pnpm dev
76
65
  ```
77
66
 
78
- ## 🧱 プロジェクト構造
67
+ ![Project Structure](../assets/readme/headers/project-structure.svg)
79
68
 
80
69
  ```
81
70
  ├── public/ # 静的アセット
82
71
  ├── src/ # ソースコード
83
- │ ├── App.css # グローバルスタイルとTailwindのインポート
72
+ │ ├── App.css # グローバルスタイルと Tailwind インポート
84
73
  │ ├── App.tsx # メインアプリケーションコンポーネント
85
74
  │ └── index.tsx # エントリーポイント
86
- ├── rsbuild.config.ts # Rsbuild設定
87
- ├── tsconfig.json # TypeScript設定
88
- ├── eslint.config.js # ESLint設定
75
+ ├── rsbuild.config.ts # Rsbuild 設定
76
+ ├── tsconfig.json # TypeScript 設定
77
+ ├── eslint.config.js # ESLint 設定
89
78
  └── package.json # プロジェクトの依存関係とスクリプト
90
79
  ```
91
80
 
92
- ## 🤝 コントリビューション
81
+ ![Contributing](../assets/readme/headers/contributing.svg)
82
+
83
+ コントリビュートを歓迎します！以下の手順に従ってコントリビュートしてください：
84
+
85
+ 1. リポジトリをフォーク
86
+ 2. 機能ブランチを作成（`git checkout -b feature/amazing-feature`）
87
+ 3. 変更をコミット（`git commit -m 'Add some amazing feature'`）
88
+ 4. ブランチにプッシュ（`git push origin feature/amazing-feature`）
89
+ 5. Pull Request を作成
93
90
 
94
- 貢献は歓迎され、非常に高く評価されています！貢献するには以下の手順に従ってください：
91
+ ![License](../assets/readme/headers/license.svg)
95
92
 
96
- 1. リポジトリをフォークする
97
- 2. 機能ブランチを作成する（`git checkout -b feature/amazing-feature`）
98
- 3. 変更をコミットする（`git commit -m 'Add some amazing feature'`）
99
- 4. ブランチにプッシュする（`git push origin feature/amazing-feature`）
100
- 5. Pull Requestを開く
93
+ MIT License © 2025 Trapar Waves
101
94
 
102
- ## 👤 Author
95
+ ## 👤 作者
103
96
 
104
- - **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
105
- - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
97
+ - **Rikka：** [admin@rikka.cc](mailto:admin@rikka.cc)
98
+ - **GitHub プロフィール：** [Muromi-Rikka](https://github.com/Muromi-Rikka)
106
99
 
107
- ## 🔗 Links
100
+ ## 🔗 リンク
108
101
 
109
- - **リポジトリ:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
110
- - **ホームページ:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
111
- - **イシュー:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
102
+ - **リポジトリ：** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
103
+ - **Issues：** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
package/readme/README-RU.md CHANGED
@@ -7,49 +7,42 @@
7
7
  ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
8
  ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
9
9
 
10
+ ![React Tailwind](../assets/readme/hero.svg)
11
+
10
12
  ---
11
13
 
12
14
  [English](../README.md) | [中文](./README-CN.md) | [日本語](./README-JP.md)
13
15
 
14
- > Современный шаблон разработки пользовательского интерфейса, интегрирующий React и Tailwind CSS, с поддержкой Rsbuild, TypeScript, ESLint (конфигурация Antfu) и Iconify.
16
+ > Современный шаблон разработки UI, интегрирующий React и Tailwind CSS, с поддержкой Rsbuild, TypeScript, ESLint (конфигурация Antfu) и Iconify.
15
17
 
16
- ## ✨ Особенности
18
+ ![Features](../assets/readme/headers/features.svg)
17
19
 
18
- - **Современный UI-фреймворк:** Строится с использованием React (v19) для компонентно-ориентированного декларативного интерфейса.
19
- - **Стилизация с упором на утилиты:** Использует Tailwind CSS v4 (`tailwindcss`) вместе с `@tailwindcss/postcss`, обеспечивая гибкую и быструю стилизацию при сохранении согласованности.
20
- - **Быстрый рабочий процесс разработки:** Использует Rsbuild (`@rsbuild/core` и `@rsbuild/plugin-react`) для оптимизированных сборок и эффективной производительности сервера разработки.
21
- - **Поддержка иконок:** Включает `@iconify/json` и `@iconify/tailwind4` для масштабируемой и настраиваемой иконографии.
22
- - **Типовая безопасность:** Использует TypeScript (v5.9.x) для повышения надежности кода и обеспечения надежной проверки типов во время разработки.
23
- - **Фокус на качестве кода:** Включает ESLint с `@antfu/eslint-config` для линтинга и обеспечения лучших практик в кодовой базе.
24
- - **Git Hooks:** Интеграция `husky` и `lint-staged` для предварительных проверок коммитов.
20
+ - **Современный UI фреймворк:** Построен на React (v19) для компонентно-ориентированного декларативного интерфейса.
21
+ - **Утилитарный подход к стилям:** Использует Tailwind CSS v4 (`tailwindcss`) вместе с `@tailwindcss/postcss`, обеспечивая гибкую и быструю разработку стилей с сохранением一致性.
22
+ - **Быстрый рабочий процесс разработки:** Использует Rsbuild (`@rsbuild/core` и `@rsbuild/plugin-react`) для оптимизированных сборок и эффективной работы сервера разработки.
23
+ - **Поддержка иконок:** Включает `@iconify/json` и `@iconify/tailwind4` для масштабируемых и настраиваемых иконок.
24
+ - **Типобезопасность:** Использует TypeScript (v5.9.x) для повышения надежности кода и обеспечения строгой проверки типов во время разработки.
25
+ - **Фокус на качестве кода:** Включает ESLint с `@antfu/eslint-config` для линтинга и применения лучших практик.
26
+ - **Git Hooks:** Интегрированы `husky` и `lint-staged` для проверок перед коммитом.
25
27
 
26
- ## 💻 Технологический стек
28
+ ![Tech Stack](../assets/readme/headers/tech-stack.svg)
27
29
 
28
- - **Фреймворк/Библиотека:** React (v19)
30
+ - **Фреймворк/библиотека:** React (v19)
29
31
  - **Стилизация:** Tailwind CSS (`tailwindcss`)
30
32
  - **Инструмент сборки:** Rsbuild (`@rsbuild/core`)
31
33
  - **Язык:** TypeScript (v5.9.x)
32
- - **Обработка CSS:** PostCSS with `@tailwindcss/postcss`
33
- - **Линтинг:** ESLint с `@antfu/eslint-config`
34
+ - **Обработка CSS:** PostCSS и `@tailwindcss/postcss`
35
+ - **Линтинг:** ESLint и `@antfu/eslint-config`
34
36
  - **Иконки:** Iconify (`@iconify/json`, `@iconify/tailwind4`)
35
37
 
36
- Полный список зависимостей см. в [package.json](../package.json).
37
-
38
- ## 🚀 Начало работы
38
+ Полный список зависимостей смотрите в [package.json](../package.json).
39
39
 
40
- Следуйте этим инструкциям, чтобы запустить проект локально.
40
+ ![Getting Started](../assets/readme/headers/getting-started.svg)
41
41
 
42
- ### Предварительные требования
42
+ ## Предварительные требования
43
43
 
44
- Убедитесь, что у вас установлены следующие компоненты:
45
-
46
- - Node.js (рекомендуется версия >= 18.x)
47
- - Пакетный менеджер (npm, yarn или pnpm)
48
-
49
- ```bash
50
- node -v
51
- npm -v
52
- ```
44
+ - Node.js (рекомендуется >= 18.x)
45
+ - Менеджер пакетов (npm, yarn или pnpm)
53
46
 
54
47
  ### Установка
55
48
 
@@ -59,14 +52,10 @@ npm -v
59
52
  pnpm create trapar-waves
60
53
  ```
61
54
 
62
- 2. Перейдите в каталог вашего проекта и установите зависимости:
55
+ 2. Перейдите в директорию проекта и установите зависимости:
63
56
 
64
57
  ```bash
65
58
  pnpm install
66
- # or
67
- npm install
68
- # or
69
- yarn install
70
59
  ```
71
60
 
72
61
  3. Запустите сервер разработки:
@@ -75,12 +64,12 @@ npm -v
75
64
  pnpm dev
76
65
  ```
77
66
 
78
- ## 🧱 Структура проекта
67
+ ![Project Structure](../assets/readme/headers/project-structure.svg)
79
68
 
80
69
  ```
81
70
  ├── public/ # Статические ресурсы
82
71
  ├── src/ # Исходный код
83
- │ ├── App.css # Глобальные стили и импорт Tailwind
72
+ │ ├── App.css # Глобальные стили и импорты Tailwind
84
73
  │ ├── App.tsx # Основной компонент приложения
85
74
  │ └── index.tsx # Точка входа
86
75
  ├── rsbuild.config.ts # Конфигурация Rsbuild
@@ -89,23 +78,26 @@ npm -v
89
78
  └── package.json # Зависимости и скрипты проекта
90
79
  ```
91
80
 
92
- ## 🤝 Участие в разработке
81
+ ![Contributing](../assets/readme/headers/contributing.svg)
93
82
 
94
- Вклад в проект приветствуется и очень ценится! Чтобы внести вклад, следуйте этим шагам:
83
+ Участие приветствуется и высоко ценится! Пожалуйста, следуйте этим шагам для вклада:
95
84
 
96
- 1. Сделайте форк репозитория
97
- 2. Создайте ветку с функцией (`git checkout -b feature/amazing-feature`)
98
- 3. Зафиксируйте свои изменения (`git commit -m 'Add some amazing feature'`)
85
+ 1. Fork репозиторий
86
+ 2. Создайте ветку для новой функции (`git checkout -b feature/amazing-feature`)
87
+ 3. Зафиксируйте изменения (`git commit -m 'Add some amazing feature'`)
99
88
  4. Отправьте изменения в ветку (`git push origin feature/amazing-feature`)
100
89
  5. Откройте Pull Request
101
90
 
102
- ## 👤 Author
91
+ ![License](../assets/readme/headers/license.svg)
92
+
93
+ MIT License © 2025 Trapar Waves
94
+
95
+ ## 👤 Автор
103
96
 
104
97
  - **Rikka:** [admin@rikka.cc](mailto:admin@rikka.cc)
105
- - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
98
+ - **Профиль GitHub:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
106
99
 
107
- ## 🔗 Links
100
+ ## 🔗 Ссылки
108
101
 
109
102
  - **Репозиторий:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
110
- - **Домашняя страница:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
111
- - **Проблемы:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
103
+ - **Issues:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
package/rsbuild.config.ts CHANGED
@@ -1,8 +1,8 @@
1
- import process from "node:process";
2
1
  import { defineConfig } from "@rsbuild/core";
3
2
  import { pluginReact } from "@rsbuild/plugin-react";
4
3
  import { RsdoctorRspackPlugin } from "@rsdoctor/rspack-plugin";
5
4
  import tailwind from "@tailwindcss/postcss";
5
+ import process from "node:process";
6
6
  import TurboConsole from "unplugin-turbo-console/rspack";
7
7
 
8
8
  function normalizeBasePath(): string {
@@ -15,20 +15,18 @@ function normalizeBasePath(): string {
15
15
  }
16
16
 
17
17
  const basePath = normalizeBasePath();
18
- const useSubpath = basePath !== "/";
18
+ const isUseSubpath = basePath !== "/";
19
19
 
20
- const enableRsdoctor = Boolean(process.env.RSDOCTOR);
21
- const enableTurboConsole = process.env.NODE_ENV === "development";
20
+ const isEnableRsdoctor = Boolean(process.env.RSDOCTOR);
21
+ const isEnableTurboConsole = process.env.NODE_ENV === "development";
22
22
 
23
23
  export default defineConfig({
24
- ...(useSubpath
25
- ? {
26
- server: { base: basePath },
27
- output: { assetPrefix: basePath },
28
- }
29
- : {}),
24
+ ...(isUseSubpath && {
25
+ output: { assetPrefix: basePath },
26
+ server: { base: basePath },
27
+ }),
30
28
  performance: {
31
- ...(enableRsdoctor ? { buildCache: false } : {}),
29
+ ...(isEnableRsdoctor && { buildCache: false }),
32
30
  },
33
31
  plugins: [pluginReact()],
34
32
  tools: {
@@ -39,8 +37,8 @@ export default defineConfig({
39
37
  },
40
38
  rspack: {
41
39
  plugins: [
42
- ...(enableTurboConsole ? [TurboConsole()] : []),
43
- ...(enableRsdoctor
40
+ ...(isEnableTurboConsole ? [TurboConsole()] : []),
41
+ ...(isEnableRsdoctor
44
42
  ? [
45
43
  new RsdoctorRspackPlugin({
46
44
  output: {
package/src/{App.tsx → app.tsx} RENAMED
@@ -1,25 +1,25 @@
1
- import "./App.css";
1
+ import "./app.css";
2
2
 
3
3
  const HOMEPAGE = "https://github.com/Trapar-waves/react-tailwind";
4
4
  const LOGOS_SET_URL = "https://icon-sets.iconify.design/logos/";
5
5
 
6
6
  interface TechItem {
7
- id: string;
8
- label: string;
9
7
  hint: string;
10
8
  iconClass: string;
9
+ id: string;
10
+ label: string;
11
11
  }
12
12
 
13
13
  const techStack: TechItem[] = [
14
- { id: "react", label: "React 19", hint: "组件驱动、声明式 UI", iconClass: "icon-[logos--react]" },
15
- { id: "ts", label: "TypeScript", hint: "静态类型与编辑器体验", iconClass: "icon-[logos--typescript-icon]" },
16
- { id: "tailwind", label: "Tailwind CSS 4", hint: "tailwindcss · @tailwindcss/postcss", iconClass: "icon-[logos--tailwindcss-icon]" },
17
- { id: "rsbuild", label: "Rsbuild", hint: "@rsbuild/core · @rsbuild/plugin-react", iconClass: "icon-[material-icon-theme--rstack]" },
18
- { id: "eslint", label: "ESLint", hint: "@antfu/eslint-config", iconClass: "icon-[logos--eslint]" },
19
- { id: "iconify", label: "Iconify", hint: "@iconify/json · @iconify/tailwind4（含 logos）", iconClass: "icon-[logos--markdown]" },
20
- { id: "pnpm", label: "pnpm", hint: "包管理与 CI 缓存", iconClass: "icon-[logos--pnpm]" },
21
- { id: "node", label: "Node.js", hint: "本地开发与构建", iconClass: "icon-[logos--nodejs-icon]" },
22
- { id: "github", label: "GitHub Actions", hint: "Release 与 Pages 工作流", iconClass: "icon-[logos--github-icon]" },
14
+ { hint: "组件驱动、声明式 UI", iconClass: "icon-[logos--react]", id: "react", label: "React 19" },
15
+ { hint: "静态类型与编辑器体验", iconClass: "icon-[logos--typescript-icon]", id: "ts", label: "TypeScript" },
16
+ { hint: "tailwindcss · @tailwindcss/postcss", iconClass: "icon-[logos--tailwindcss-icon]", id: "tailwind", label: "Tailwind CSS 4" },
17
+ { hint: "@rsbuild/core · @rsbuild/plugin-react", iconClass: "icon-[material-icon-theme--rstack]", id: "rsbuild", label: "Rsbuild" },
18
+ { hint: "@renton/eslint-config-react", iconClass: "icon-[logos--eslint]", id: "eslint", label: "ESLint" },
19
+ { hint: "@iconify/json · @iconify/tailwind4（含 logos）", iconClass: "icon-[logos--markdown]", id: "iconify", label: "Iconify" },
20
+ { hint: "包管理与 CI 缓存", iconClass: "icon-[logos--pnpm]", id: "pnpm", label: "pnpm" },
21
+ { hint: "本地开发与构建", iconClass: "icon-[logos--nodejs-icon]", id: "node", label: "Node.js" },
22
+ { hint: "Release 与 Pages 工作流", iconClass: "icon-[logos--github-icon]", id: "github", label: "GitHub Actions" },
23
23
  ];
24
24
 
25
25
  const readmeFeatures: string[] = [
@@ -28,22 +28,22 @@ const readmeFeatures: string[] = [
28
28
  "Rsbuild 提供极速开发与优化构建。",
29
29
  "@iconify/json 与 @iconify/tailwind4，支持 logos 等多集合矢量图标。",
30
30
  "TypeScript 贯穿模板代码。",
31
- "@antfu/eslint-config 统一代码风格与规则。",
31
+ "@renton/eslint-config-react 统一代码风格与规则。",
32
32
  "Husky 与 lint-staged 在提交前执行检查。",
33
33
  ];
34
34
 
35
35
  const readmeTechNote = "本模板未内置路由或全局状态；可按业务接入 TanStack Router、Zustand 等，与 README「扩展」章节一致。";
36
36
 
37
- function App() {
37
+ export default function App() {
38
38
  return (
39
39
  <div className="min-h-dvh bg-[#faf8f5] text-slate-900 font-sans antialiased">
40
- <a href="#main" className="skip-link">
40
+ <a className="skip-link" href="#main">
41
41
  跳到主要内容
42
42
  </a>
43
43
  <div className="hero-grid relative overflow-hidden border-b border-slate-200/80">
44
44
  <div
45
- 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]"
46
45
  aria-hidden
46
+ 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]"
47
47
  />
48
48
  <header className="relative mx-auto max-w-5xl px-6 pb-16 pt-14 sm:px-10 sm:pb-20 sm:pt-20">
49
49
  <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-orange-700">
@@ -56,10 +56,10 @@ function App() {
56
56
  本页结合 README 特性与
57
57
  {" "}
58
58
  <a
59
+ className="font-semibold text-orange-800 underline decoration-orange-300 underline-offset-2 hover:text-orange-950"
59
60
  href={LOGOS_SET_URL}
60
- target="_blank"
61
61
  rel="noreferrer"
62
- className="font-semibold text-orange-800 underline decoration-orange-300 underline-offset-2 hover:text-orange-950"
62
+ target="_blank"
63
63
  >
64
64
  Iconify logos
65
65
  </a>
@@ -68,19 +68,19 @@ function App() {
68
68
  </p>
69
69
  <div className="mt-10 flex flex-wrap items-center gap-4">
70
70
  <a
71
- href={HOMEPAGE}
72
71
  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"
72
+ href={HOMEPAGE}
73
73
  >
74
74
  查看模板仓库
75
75
  </a>
76
- <span className="icon-[logos--react] text-3xl text-sky-700" aria-hidden />
77
- <span className="icon-[logos--tailwindcss-icon] text-3xl text-cyan-700" aria-hidden />
78
- <span className="icon-[material-icon-theme--rstack] text-3xl text-amber-800" aria-hidden />
76
+ <span aria-hidden className="icon-[logos--react] text-3xl text-sky-700" />
77
+ <span aria-hidden className="icon-[logos--tailwindcss-icon] text-3xl text-cyan-700" />
78
+ <span aria-hidden className="icon-[material-icon-theme--rstack] text-3xl text-amber-800" />
79
79
  </div>
80
80
  </header>
81
81
  </div>
82
82
 
83
- <main id="main" className="mx-auto max-w-5xl px-6 py-14 sm:px-10">
83
+ <main className="mx-auto max-w-5xl px-6 py-14 sm:px-10" id="main">
84
84
  <h2 className="font-display text-2xl text-slate-900">技术栈一览</h2>
85
85
  <p className="mt-2 max-w-3xl text-sm leading-relaxed text-slate-600">
86
86
  Rsbuild 与 Rspack 生态相关示意使用
@@ -91,10 +91,10 @@ function App() {
91
91
  <ul className="mt-8 grid list-none gap-4 p-0 sm:grid-cols-2 lg:grid-cols-3">
92
92
  {techStack.map(item => (
93
93
  <li
94
- key={item.id}
95
94
  className="flex gap-4 rounded-2xl border border-slate-200/90 bg-white p-5 shadow-sm"
95
+ key={item.id}
96
96
  >
97
- <div className="trapar-tech-icon" aria-hidden>
97
+ <div aria-hidden className="trapar-tech-icon">
98
98
  <span className={item.iconClass} />
99
99
  </div>
100
100
  <div>
@@ -113,8 +113,8 @@ function App() {
113
113
  </ul>
114
114
  <p className="mt-4 max-w-3xl text-sm italic text-slate-600">{readmeTechNote}</p>
115
115
 
116
- <section className="mt-12 rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm" aria-labelledby="a11y-heading">
117
- <h2 id="a11y-heading" className="font-display text-xl text-slate-900">
116
+ <section aria-labelledby="a11y-heading" className="mt-12 rounded-2xl border border-slate-200/90 bg-white p-6 shadow-sm">
117
+ <h2 className="font-display text-xl text-slate-900" id="a11y-heading">
118
118
  图标与可访问性
119
119
  </h2>
120
120
  <p className="mt-3 max-w-3xl text-sm leading-relaxed text-slate-600">
@@ -125,9 +125,9 @@ function App() {
125
125
  ；主操作区保持约 44px 触控高度与可见焦点环；系统开启「减少动态效果」时装饰动画会缩短。
126
126
  </p>
127
127
  <div className="mt-4 flex flex-wrap gap-3">
128
- <span className="icon-[logos--eslint] text-3xl text-purple-800" aria-hidden />
129
- <span className="icon-[logos--typescript-icon] text-3xl text-blue-800" aria-hidden />
130
- <span className="icon-[logos--github-icon] text-3xl text-slate-800" aria-hidden />
128
+ <span aria-hidden className="icon-[logos--eslint] text-3xl text-purple-800" />
129
+ <span aria-hidden className="icon-[logos--typescript-icon] text-3xl text-blue-800" />
130
+ <span aria-hidden className="icon-[logos--github-icon] text-3xl text-slate-800" />
131
131
  </div>
132
132
  </section>
133
133
 
@@ -165,5 +165,3 @@ function App() {
165
165
  </div>
166
166
  );
167
167
  }
168
-
169
- export default App;
package/src/index.tsx CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as React from "react";
2
2
  import ReactDOM from "react-dom/client";
3
- import App from "./App";
3
+ import App from "./app";
4
4
 
5
- const rootEl = document.getElementById("root");
6
- if (rootEl) {
7
- const root = ReactDOM.createRoot(rootEl);
5
+ const rootElement = document.querySelector("#root");
6
+ if (rootElement) {
7
+ const root = ReactDOM.createRoot(rootElement);
8
8
  root.render(
9
9
  <React.StrictMode>
10
10
  <App />
/package/src/{App.css → app.css} RENAMED
File without changes
/package/src/{env.d.ts → environment.d.ts} RENAMED
File without changes