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.