React & Tailwind CSS

React & Tailwind CSS guide for Trezo.

React.js Intro

React.js is a popular JavaScript library for building user interfaces, primarily maintained by Facebook. It allows developers to create fast and interactive web applications using components, which are reusable, self-contained pieces of UI.

Key Features:

  • Component-Based Architecture: Build encapsulated components that manage their own state.

  • JSX Syntax: Combines HTML with JavaScript for easier UI development.

  • Virtual DOM: Improves performance by updating only changed elements in the DOM.

  • Unidirectional Data Flow: Ensures predictable state management and debugging.

Tailwind CSS

Tailwind CSS is a modern utility-first CSS framework designed to streamline front-end development by providing a vast library of low-level, customizable utility classes. Unlike traditional CSS frameworks that come with predefined components, Tailwind offers a more flexible approach, allowing developers to style elements directly in HTML. Each utility class in Tailwind serves a single purpose, such as setting colors, padding, margins, shadows, and typography, enabling fast prototyping and consistent, responsive designs.

With a focus on efficiency and ease of customization, Tailwind encourages developers to create unique interfaces without writing extensive custom CSS. Its utility-based approach minimizes CSS bloat, while configuration options and plugins allow seamless theming, dark mode support, and integration with other tools like PostCSS or PurgeCSS for optimal performance in production.

Tailwind CSS is perfect for building modern, responsive websites with minimal styling overhead and full design control right in your markup.

Setup Development Environment

To kickstart the development of the web app with Trezo, at first need to setup the react development environment.

  • Node.js and NPM: If NodeJS is not installed then download it from https://nodejs.org. NPM comes bundled with Node.js

NPM Packages

  • Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Development Server

  • Run npm run dev for a dev server. Navigate to http://localhost:5173. The app will autometically reload if you change any of the source files.

Building

  • Run npm run build the project. The build artifacts will be stored in the dist/ directory.

Local Environment Installation

Open the react-tailwindcss folder in Visual Studio Code and open a terminal on that folder and run these commands one by one.

1. npm install
2. npm run dev
3. Go To http://localhost:5173
4. Done

Pages and Components Info

  • eCommerce dashboard (/src/pages/dashboard/Ecommerce.tsx)
  • CRM dashboard (/src/pages/dashboard/crm/page.tsx)
  • Project Management dashboard (/src/pages/dashboard/ProjectManagement.tsx)
  • LMS dashboard (/src/pages/dashboard/Lms.tsx)
  • Help Desk dashboard (/src/pages/dashboard/HelpDesk.tsx)
  • Front page (/src/pages/Home.tsx)
  • Front page features (/src/pages/front-pages/Features.tsx)
  • Front page team (/src/pages/front-pages/Team.tsx)
  • Front page faq (/src/pages/front-pages/FpFaq.tsx)
  • Front page contact (/src/pages/front-pages/Contact.tsx)
  • To Do List (/src/pages/apps/ToDoList.tsx)
  • and more...

Common Components:

  • TopNavbar (/src/components/Layout/Header/index.tsx)
  • LeftSidebar (/src/components/Layout/SidebarMenu.tsx)
  • Footer (/src/components/Layout/Footer.tsx)
  • and more...

Dependencies

Here are the dependencies list which being used in the Trezo Nextjs Template:

"dependencies": {
    "@fullcalendar/daygrid": "^6.1.17",
    "@fullcalendar/interaction": "^6.1.17",
    "@fullcalendar/react": "^6.1.17",
    "@headlessui/react": "^2.2.4",
    "@tailwindcss/vite": "^4.1.5",
    "apexcharts": "^4.7.0",
    "material-symbols": "^0.31.7",
    "react": "^19.1.0",
    "react-apexcharts": "^1.7.0",
    "react-calendar": "^6.0.0",
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.5.3",
    "react-simple-wysiwyg": "^3.2.2",
    "react-svg-worldmap": "^2.0.0-alpha.16",
    "remixicon": "^4.6.0",
    "swiper": "^11.2.8",
    "tailwind-scrollbar": "^4.0.2",
    "tailwindcss": "^4.1.5"
},
"devDependencies": {
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@types/swiper": "^5.4.3",
    "@vitejs/plugin-react": "^4.4.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
    "vite": "^6.3.5"
}

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

Google Fonts

IconFont

Packages

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!