Css for the current project my-dashboard is not working inside the browser on running the project through npm start.
I also tried installing, uninstalling, downgrading TailwindCSS multiple times. As in latest version in node_modules/tailwindcss/lib/cli.js lib folder does not existed. So current version now used is TailwindCSS v3.4.1.
package.json
{
"name": "my-dashboard",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"postinstall": "tailwindcss init -p"
},
"dependencies": {
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.5.2",
"tailwindcss": "^3.4.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
postcss.config.css
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jarvis CRM Dashboard</title>
<link rel="stylesheet" href="%PUBLIC_URL%/index.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
Dashboard.js
import React, { useState, useEffect } from "react";
import Sidebar from "./components/Sidebar.js";
import DashboardCard from "./components/DashboardCard.js";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEnvelope, faBookmark, faUpload, faStar } from "@fortawesome/free-solid-svg-icons";
import "./index.css";
const Dashboard = () => {
const [stats, setStats] = useState([]);
const [currentPage, setCurrentPage] = useState("Dashboard");
useEffect(() => {
// Simulating API call
setTimeout(() => {
setStats([
{ icon: faEnvelope, label: "Messages", value: "1,410", color: "border-blue-500" },
{ icon: faBookmark, label: "Bookmarks", value: "410", color: "border-green-500" },
{ icon: faUpload, label: "Uploads", value: "13,648", color: "border-yellow-500" },
{ icon: faStar, label: "Likes", value: "93,139", color: "border-red-500" }
]);
}, 1000);
}, []);
return (
<div className="flex h-screen">
{/* Sidebar */}
<div className="w-64 bg-gray-800 text-white h-screen fixed">
<Sidebar onMenuClick={setCurrentPage} />
</div>
{/* Main Content (Pushes aside for sidebar) */}
<div className="flex-1 p-6 bg-gray-100 ml-64">
<h1 className="text-xl font-bold">{currentPage}</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
{stats.map((stat, index) => (
<DashboardCard key={index} icon={stat.icon} label={stat.label} value={stat.value} color={stat.color} />
))}
</div>
</div>
</div>
);
};
export default Dashboard;
index.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Layout */
.app-container {
display: flex;
height: 100vh;
background-color: #f4f4f4;
}
/* Sidebar */
.sidebar {
width: 250px;
background-color: #fff;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
.sidebar h2 {
font-size: 18px;
text-align: center;
font-weight: bold;
}
.sidebar ul {
list-style-type: none;
padding: 10px 0;
}
.sidebar li {
padding: 10px;
cursor: pointer;
display: flex;
align-items: center;
}
.sidebar li:hover {
background-color: #e0e0e0;
}
/* Main Content */
.main-content {
flex: 1;
padding: 20px;
}
.dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.card {
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
}
.card i {
font-size: 30px;
margin-right: 10px;
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import Dashboard from "./Dashboard";
import "./index.css";
ReactDOM.render(
<React.StrictMode>
<Dashboard />
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals.js
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
DashboardCard.js
import React from "react";
const DashboardCard = ({ icon, label, value, color }) => (
<div className={`flex items-center p-4 bg-white shadow-md rounded border-t-4 ${color}`}>
<i className={`fas fa-${icon} text-3xl mr-4`}></i>
<div>
<p className="text-sm text-gray-600">{label}</p>
<p className="text-xl font-bold">{value}</p>
</div>
</div>
);
export default DashboardCard;
Sidebar.js
import React from "react";
const Sidebar = ({ onMenuClick }) => {
const menuItems = [
{ name: "Dashboard", icon: "fa-home" },
{ name: "Departments", icon: "fa-building" },
{ name: "Projects", icon: "fa-folder" },
{ name: "Tasks", icon: "fa-tasks" },
{ name: "Task Status", icon: "fa-list" },
{ name: "Users", icon: "fa-users" },
{ name: "Roles", icon: "fa-user-tag" },
{ name: "Permissions", icon: "fa-lock" },
{ name: "Settings", icon: "fa-cog" },
{ name: "Activity Logs", icon: "fa-history" },
];
return (
<div className="w-64 bg-white h-full shadow-md p-4">
<h2 className="text-center font-bold text-lg">Jarvis | A CRM</h2>
<ul className="mt-4">
{menuItems.map((item, index) => (
<li key={index} className="p-4 hover:bg-gray-200 cursor-pointer"
onClick={() => onMenuClick(item.name)}>
<i className={`fas ${item.icon} mr-3`}></i>
{item.name}
</li>
))}
</ul>
</div>
);
};
export default Sidebar;
Folder paths images and other images are as follows:
Note: This is my first React or JavaScript project