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

Question

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

Wongjn · Accepted Answer · 2025-02-16 08:23:20Z

2

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',
  ],

answered Feb 16 at 8:23

Wongjn

27.1k5 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dronal Bhardwaj Feb 16 at 19:35

Thanks for your help, with that I got to find a error i missed due to many tries on another version.

rozsazoltan · Accepted Answer · 2025-02-16 14:23:11Z

2

The PostCSS configuration file is not postcss.config.css, but postcss.config.js.

TailwindCSS with PostCSS - TailwindCSS v3 Docs

TailwindCSS v4

Although you primarily use v3, you mentioned that you have tried different versions as well. I'd like to draw your attention to the fact that v4 is also available. One of the groundbreaking changes in v4 is that it features automatic source detection. There is no need for the content setting written by wongjn. Instead, it scans all files except for the ignored ones. Additionally, there are many other changes as well, see:

You mentioned that you couldn't find the CLI in v4. The reason for this is that it has been separated into a different package because the init process has been discontinued (you no longer need to run it during installation). As a result, the CLI command is only useful for those who want to install TailwindCSS natively, without PostCSS and Vite.

Separated CLI package;
Changed npx tailwindcss to npx @tailwindcss/cli;
Deprecated init process - StackOverflow

Since you're using PostCSS, you don't need it anymore by default. However, if you still want to use it, you can install the @tailwindcss/cli package alongside TailwindCSS v4.

npm install tailwindcss @tailwindcss/cli

npx @tailwindcss/cli

Using TailwindCSS v4 with Tailwind CLI - TailwindCSS v4 Docs
Using PostCSS by separated package - TailwindCSS v3 to v4
Using Tailwind CLI by separated package - TailwindCSS v3 to v4

edited Feb 16 at 14:23

answered Feb 16 at 8:29

rozsazoltan

18.5k8 gold badges50 silver badges147 bronze badges

3 Comments

Dronal Bhardwaj Feb 16 at 13:54

thanks for not 'postcss.config.css', but 'postcss.config.js' that was typos. As I mentioned above in my post, I actually downgraded v4 to v3 due to missing lib folder in node_modules/tailwindcss/lib/cli.js.

rozsazoltan Feb 16 at 14:18

Sorry, so many things came to mind regarding your question, but I still forgot one thing: there is no CLI from v4 because it has been separated into a different package. I will update my answer.

Dronal Bhardwaj Feb 16 at 23:07

one of my query got answered, now the only issue left is the missing icons. Is there something I'm missing here?

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

TailwindCSS v4

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

TailwindCSS v4

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related