https://github.com/luovtyrell/react-vite-proptypes-react-router-tailwind-starter
A starter template for React projects with Vite, PropTypes, React Router, and Tailwind CSS for a fast and customizable setup.
https://github.com/luovtyrell/react-vite-proptypes-react-router-tailwind-starter
prop-types react react-router tailwindcss vite
Last synced: about 2 months ago
JSON representation
A starter template for React projects with Vite, PropTypes, React Router, and Tailwind CSS for a fast and customizable setup.
- Host: GitHub
- URL: https://github.com/luovtyrell/react-vite-proptypes-react-router-tailwind-starter
- Owner: Luovtyrell
- Created: 2024-08-22T11:45:02.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-22T16:57:19.000Z (7 months ago)
- Last Synced: 2025-11-22T18:23:48.787Z (7 months ago)
- Topics: prop-types, react, react-router, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 107 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite + PropTypes + React Router + Tailwind CSS Starter Template
This is a starter template for React projects using Vite as the bundler, PropTypes for prop validation, React Router for routing, and Tailwind CSS for styling. It provides a basic and functional setup that you can use to kickstart your React project and save time.
**Updated to support:**
- **React 19**
- **Tailwind CSS 4**
- **DaisyUI 5**
- **React Router 7**
## Table of Contents
1. [Template Structure](#template-structure)
2. [Installation](#installation)
3. [Configuration](#configuration)
4. [Additional Resources](#additional-resources)
## Template Structure
- **`src/components`**: Contains application components.
- `Counter.jsx`: Example component for counting.
- `Greeting.jsx`: Example greeting component that uses PropTypes for prop validation.
- **`src/pages`**: Contains application pages.
- `Home.jsx`: Home page that displays the greeting and includes a button to navigate to the CounterPage.
- `CounterPage.jsx`: Page displaying the counter and including a button to navigate back to the Home page.
- **`src/routes/AppRoutes.jsx`**: Route configuration for the application.
- **`src/index.css`**: Contains Tailwind CSS imports and DaisyUI plugin configuration.
## Installation
To start using this template, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/Luovtyrell/React-Vite-PropTypes-React-Router-Tailwind-Starter.git
```
2. **Navigate to the project directory:**
```bash
cd React-Vite-PropTypes-React-Router-Tailwind-Starter
```
3. **Install the dependencies:**
```bash
npm install
```
4. **Start the development server:**
```bash
npm run dev
```
This will start the development server, and you can view the application at `http://localhost:3000` (or the configured port).
## Configuration
### Tailwind CSS 4 & DaisyUI 5
This project uses **Tailwind CSS 4**, which is configured directly in CSS.
**`src/index.css`**:
```css
@import "tailwindcss";
@plugin "daisyui";
```
No `tailwind.config.js` or `postcss.config.js` is required for this setup.
DaisyUI 5 is included as a CSS plugin.
## Additional Resources
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [Vite Documentation](https://vitejs.dev/guide/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [PropTypes Guide](https://www.npmjs.com/package/prop-types)
- [React Router Guide](https://reactrouter.com/web/guides/quick-start)
---
[](https://github.com/Luovtyrell)
