React Vite Starter with Tailwind CSS, Axios, React Icons, and Sass

Welcome to the React Vite Starter project! This project is built with modern tools to quickly start a React app with Vite, Tailwind CSS, and essential libraries like Axios and React Icons.

Usage

npx react-vite-ts-starter

mkdir my-new-project
cd my-new-project
npx react-vite-ts-starter

Table of Contents

• Features
• Prerequisites
• Installation
• Project Structure
• Available Scripts
• Customization
• Contributing

Features

• ⚡ Vite - Fast and optimized React development experience.
• 🎨 Tailwind CSS - Utility-first CSS framework for rapid UI development.
• 🔗 React Router - Simple and declarative routing.
• 🔗 Axios - Promise-based HTTP client.
• 🎉 React Icons - Thousands of popular icons as components.
• 🎨 Sass - Powerful CSS preprocessor.

Prerequisites

Make sure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn

Installation

Follow these steps to set up and run the project on your local machine.

1. Clone the repository

git clone https://github.com/anasyakubu/react-vite-ts-starter.git
cd react-vite-js-starter

2. Install dependencies

This command will install all required dependencies, including React, Tailwind CSS, Axios, React Icons, and Sass.

npm install

3. Start the development server

Run the following command to start the development server:

npm run dev

Open http://localhost:5173 to view the app in the browser.

Project Structure

├── public/              # Static files
├── src/                 # Source files
│   ├── home/            # Home component
│   │   └── Home.tsx     # Main Home page component
│   ├── App.tsx          # Main application component
│   ├── main.tsx         # Application entry point
│   ├── index.css        # Tailwind CSS imports
│   └── App.css          # Additional CSS (optional)
├── tailwind.config.ts   # Tailwind CSS configuration
├── postcss.config.ts    # PostCSS configuration
├── package.json         # Project metadata and dependencies
└── README.md            # Project documentation

Available Scripts

| Script | Description | | ----------------- | --------------------------------- | | npm install | Installs all dependencies | | npm run dev | Starts the development server | | npm run build | Builds the project for production | | npm run preview | Previews the production build |

Customization

You can customize the project as per your requirements.

1. Updating the Home Page

To modify the home page:

• Edit the file src/home/Home.jsx.

2. Adding New Routes

To add new pages and routes:

1. Create a new component in the src/pages folder (e.g., About.tsx).
2. Update App.tsx to include the new route:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

3. Tailwind CSS Customization

You can extend the Tailwind CSS theme by editing the tailwind.config.ts file:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#1E40AF",
      },
    },
  },
};

Contributing

Contributions are welcome!
To contribute:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes.
4. Submit a pull request.

License

This project is licensed under the MIT License.

Contact

• Author: Anas Yakubu
• GitHub: https://github.com/anasyakubu
• Portfolio: https://anasyakubu.vercel.app