Setting Up a React Application with Vite and Tailwind CSS

Overview

The tutorial focuses on setting up a React application using Vite, Tailwind CSS, and React Router DOM.
The main goal is to create custom routing pages.

Step 1: Creating the Project with Vite

Open terminal and navigate to an empty folder.
Visit Vite documentation for setup instructions.
Run the following command to create a project:
```
npm create vite@latest test-project
```
Choose React and plain JavaScript during the setup.
Change directory to the project folder:
```
cd test-project
```
Open the project in a code editor.

Step 2: Running the Application

Install project dependencies:
```
npm install
```
Run the application:
```
npm run dev
```
Default localhost for Vite is 5173.
Clear the default content in App.jsx and replace it with:
```
<div>
    <h1>Simple Application</h1>
</div>
```

Step 3: Installing Tailwind CSS

Install Tailwind CSS, PostCSS, and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

Create Tailwind configuration:
```
npx tailwindcss init -p
```

Update tailwind.config.js:

content: [
    "index.html",
    "src/**/*.{js,jsx,ts,tsx}"
],

Set up the base styles in index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Remove unused app.css file if no longer needed.

Step 4: Verifying Tailwind CSS

Restart the application:
```
npm run dev
```

Test Tailwind by adding a class:

<div className="text-gray-500">Hello Tailwind</div>

Step 5: Setting Up React Router

Install React Router DOM:
```
npm install react-router-dom
```
Create a layout component with a header and footer.

Define routes using createBrowserRouter from React Router DOM:

Create a routes array and define paths and elements:

const router = createBrowserRouter([
    { path: "/", element: <Layout />, children: [
        { path: "", element: <HomePage /> },
        { path: "about", element: <AboutPage /> },
        // Add more routes here
    ] }
]);

Step 6: Creating Pages

Create a pages folder and add your components (e.g., AboutPage, ServicesPage).
Import and define routes in the main component.
Wrap your application in RouterProvider and pass in the router setup.

Step 7: Implementing Navigation

Use React Router's Link for navigation between pages.
Example of linking to the Home page:
```
<Link to="/">Home</Link>
```

Step 8: Finalizing the Project

Initialize a Git repository:

git init
git add .
git commit -m "Initial commit"

Create a new GitHub repository and push your code.

Conclusion

The tutorial demonstrates setting up a React application with Vite, Tailwind CSS, and React Router DOM.
Encourage exploration of the created project and customization of components and styles.
Future tutorials will cover advanced topics like building themes with Tailwind CSS.

Setting Up React with Vite and Tailwind