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.

Table of Contents

1. Template Structure
2. Installation
3. Additional Configuration
4. 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/styles/index.css: Contains Tailwind CSS imports and a commented base layer if needed.

Installation

To start using this template, follow these steps:

1. Clone the repository:

   git clone https://github.com/Luovtyrell/React-Vite-PropTypes-React-Router-Tailwind-Starter.git
   

2. Navigate to the project directory:

   cd React-Vite-PropTypes-React-Router-Tailwind-Starter
   

3. Install the dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

   This will start the development server, and you can view the application at http://localhost:3000 (or the configured port).

Additional Configuration

• Tailwind CSS:
  • Customize Tailwind settings such as adding custom colors in tailwind.config.js.
• You can add additional plugins like DaisyUI.

  • You can install DaisyUI using npm:

    npm i -D daisyui@latest
    

    Then, add DaisyUI to your tailwind.config.js file:

    // tailwind.config.js
    module.exports = {
      content: ["./src/**/*.{js,jsx,ts,tsx}"],
      theme: {
        extend: {},
      },
      plugins: [require("daisyui")],
    };
    

Additional Resources

• React Documentation
• Vite Documentation
• Tailwind CSS Documentation
• PropTypes Guide
• React Router Guide