@trapar-waves/react-tailwind

---

中文 | 日本語 | Русский язык

A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.

✨ Features

• 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.
• Fast Development Workflow: Uses Rsbuild (@rsbuild/core and @rsbuild/plugin-react) for optimized builds and efficient development server performance.
• Icon Support: Includes @iconify/json and @iconify/tailwind4 for scalable and customizable iconography.
• Type Safety: Utilizes TypeScript (v5.9.x) to enhance code reliability and provide robust type checking during development.
• 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

• Framework/Library: React (v19)
• Styling: Tailwind CSS (tailwindcss)
• Build Tool: Rsbuild (@rsbuild/core)
• Language: TypeScript (v5.9.x)
• CSS Processing: PostCSS with @tailwindcss/postcss
• Linting: ESLint with @antfu/eslint-config
• Iconography: Iconify (@iconify/json, @iconify/tailwind4)

See the package.json for a full list of dependencies.

🚀 Getting Started

Follow these instructions to get the project running locally.

Prerequisites

Ensure you have the following installed:

• Node.js (>= 18.x recommended)
• Package manager (npm, yarn, or pnpm)

node -v
npm -v

Installation

1. Create a new project using the template:

   pnpm create trapar-waves

2. Navigate to your project directory and install dependencies:

   pnpm install
   # or
   npm install
   # or
   yarn install

3. Start the development server:

   pnpm dev

🧱 Project Structure

├── public/           # Static assets
├── src/              # Source code
│   ├── App.css       # Global styles and Tailwind imports
│   ├── App.tsx       # Main application component
│   └── index.tsx     # Entry point
├── rsbuild.config.ts # Rsbuild configuration
├── tsconfig.json     # TypeScript configuration
├── eslint.config.js  # ESLint configuration
└── package.json      # Project dependencies and scripts

🤝 Contributing

Contributions are welcome and greatly appreciated! Please follow these steps to contribute:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

👤 Author

• Rikka: [email protected]
• GitHub Profile: Muromi-Rikka

🔗 Links

• Repository: https://github.com/Trapar-waves/react-tailwind
• Homepage: https://github.com/Trapar-waves/react-tailwind
• Issues: https://github.com/Trapar-waves/react-tailwind/issues