javascript - Unable to get desired output for reactjs frontend project as css and fontawesome icons aren't working while

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

Old Outcome before adding content type in tailwind.config.js
Nearly Expected Outcome
Project folder
Public folder
src folder
components folder

Note: This is my first React or JavaScript project

Css for the current project my-dashboard is not working inside the browser on running the project through npm start.

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

Old Outcome before adding content type in tailwind.config.js
Nearly Expected Outcome
Project folder
Public folder
src folder
components folder

Note: This is my first React or JavaScript project

Share Improve this question edited Feb 16 at 19:37 asked Feb 16 at 8:20 Dronal Bhardwaj 231 silver badge5 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 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',
  ],

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:

Automatic Source Detection from TailwindCSS v4
Whats changed from TailwindCSS v4

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Unable to get desired output for reactjs frontend project as css and fontawesome icons aren't working while

2 Answers 2

TailwindCSS v4

与本文相关的文章

评论列表(0)