javascript reactjs tailwind-css tailwind-ui tailwind-css-3

Unable to get desired output for reactjs frontend project as css and fontawesome icons aren't working while running on browser

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.js

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

tailwind.config.js

module.exports = {
  content: [./src/**/*.{js,jsx,ts,tsx}],
  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";
imimport 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";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
    faHome, faBuilding, faFolder, faTasks, faList,
    faUsers, faUserTag, faLock, faCog, faHistory
} from "@fortawesome/free-solid-svg-icons";

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-black h-full shadow-md p-4">
            <h2 className="text-center font-bold text-lg">Eagle's Eye</h2>
            <ul className="mt-4">
                {menuItems.map((item, index) => (
                    <li key={index} className="p-4 hover:bg-gray-700 cursor-pointer"
                     onClick={() => onMenuClick(item.name)}>
                        <FontAwesomeIcon icon={item.icon} className="mr-3" />
                        {item.name}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Sidebar;

Folder paths images and other images are as follows: Current Outcome

Note: This is my first React or JavaScript project

Solution

As per the documentation:

The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.

So, you'd want to edit the content entry in your tailwind.config.js to cover the files of your JavaScript code, like:

module.exports = {
  content: [
    'src/**/*.js',
  ],