Das ReactJS -Frontend -Projekt kann nicht in der Lage sein, die gewünschte Ausgabe zu erhalten, da CSS im Browser nicht ⇐ JavaScript

[Guest]

CSS für das aktuelle Projekt My-Dasboard funktioniert nicht im Browser, um das Projekt über NPM Start . mal. Wie in der neuesten Version in node_modules/tailwindcss/lib/cli.js libcs ​​existiert nicht. Die aktuelle Version ist jetzt verwendete Tailwindcss v3.4.1.

Code: Select all

{
"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"
]
}
}

postcs.config.css

Code: Select all

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

Tailwind.config.js

Code: Select all

module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

Index.html

Code: Select all

Jarvis CRM Dashboard
[*]

Dashboard.js

Code: Select all

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 (

{/* Sidebar */}



{/* Main Content (Pushes aside for sidebar) */}

{currentPage}

{stats.map((stat, index) =>  (

))}




);
};

export default Dashboard;

Index.css

Code: Select all

@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

Code: Select all

import React from "react";
import ReactDOM from "react-dom";
import Dashboard from "./Dashboard";
import "./index.css";

ReactDOM.render(


,
document.getElementById("root")
);

reportWebvitals.js

Code: Select all

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

Code: Select all

import React from "react";

const DashboardCard = ({ icon, label, value, color }) => (

[i][/i]

{label}
{value}


);

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 (

Jarvis | A CRM

• {menuItems.map((item, index) => (
  onMenuClick(item.name)}>
  
  {item.name}
  
  ))}

);
};

export default Sidebar;
< /code>
Ordner Pfade Bilder und andere Bilder sind wie folgt: < /p>

• Aktuelles Ergebnis < /li>
  < li> fast erwartetes Ergebnis
• Projektordner
• öffentlicher Ordner
• Src -Ordner
• Komponentenordner

Hinweis: Dies ist mein erstes React- oder JavaScript -Projekt