Basic Setup App.jsx

Let's add the theme inside tailwind.config.js file.

 
  theme: {
    extend: {
      fontFamily: {
        epilogue: ['Epilogue', 'sans-serif'],
      },
      boxShadow: {
        secondary: '10px 10px 20px rgba(2, 2, 2, 0.25)',
      },
    },
  },

1. You need to import tailwind in the main.jsx file.

import './index.css';

Because we already import tailwind in the index.css file.

2. Open App.jsx and add the code below.

import React from 'react';
import { Route, Routes } from 'react-router-dom';
 
 
const App = () => {
 return (
   <div className="relative sm:-8 p-4 bg-[#13131a] min-h-screen flex flex-row">
     <div className="sm:flex hidden mr-10 relative">
       Sidebar
     </div>
 
     <div className="flex-1 max-sm:w-full max-w-[1280px] mx-auto sm:pr-5">
       Navbar
 
       <Routes>
 
       </Routes>
     </div>
   </div>
 )
}
 
export default App

• React:

  import React from 'react';

  • React is a JavaScript library for building user interfaces. It is imported to use its features in the App component.

• react-router-dom:

  import { Route, Routes } from 'react-router-dom';

  • react-router-dom is a package that provides routing functionality for React applications.
  • Route is a component that renders a specified UI when its path matches the current URL.
  • Routes is a component that wraps multiple Route components and handles the rendering of the appropriate Route based on the current URL.

• App component:

  const App = () => {
    return (
      // ...
    )
  }

  • App is a functional component that serves as the main wrapper for the application.

• div with Tailwind classes:

  <div className="relative sm:-8 p-4 bg-[#13131a] min-h-screen flex flex-row">

  • relative: Sets the position property to "relative".
  • sm:-8: Applies a negative margin of 2rem (8 units) on the small (sm) breakpoint and up.
  • p-4: Applies padding of 1rem (4 units) on all sides.
  • bg-[#13131a]: Sets the background color to the custom color #13131a.
  • min-h-screen: Sets the minimum height to the height of the viewport.
  • flex: Sets the display property to "flex".
  • flex-row: Sets the flex direction to "row".

• Sidebar div:

  <div className="sm:flex hidden mr-10 relative">
    Sidebar
  </div>

  • sm:flex: Sets the display property to "flex" on the small (sm) breakpoint and up.
  • hidden: Sets the display property to "none".
  • mr-10: Applies a right margin of 2.5rem (10 units).
  • relative: Sets the position property to "relative".
  • This div serves as a placeholder for the Sidebar component.

• Main content div:

  <div className="flex-1 max-sm:w-full max-w-[1280px] mx-auto sm:pr-5">
    Navbar
   
    <Routes>
    </Routes>
  </div>

  • flex-1: Sets the flex-grow property to 1, allowing the element to grow and fill the available space.
  • max-sm:w-full: Sets the maximum width to 100% on the small (sm) breakpoint and up.
  • max-w-[1280px]: Sets the maximum width to 1280px.
  • mx-auto: Applies horizontal auto margins to center the element.
  • sm:pr-5: Applies a right padding of 1.25rem (5 units) on the small (sm) breakpoint and up.
  • This div serves as a container for the Navbar component and the Routes.

• Routes component:

  <Routes>
  </Routes>

  • The Routes component is used to wrap Route components, which define the different pages/routes in the application.

• Exporting App component:

  export default App

  • The App component is exported as the default export, allowing other components to import and use it.