React项目my-dashboard中Tailwind CSS与FontAwesome图标不生效的问题求助

大家好，我现在遇到了个棘手的问题：我的React项目my-dashboard里，Tailwind CSS完全不生效，运行npm start后浏览器里根本看不到预期的样式效果。我已经反复安装、卸载、降级TailwindCSS好多次了——之前用最新版本的时候发现node_modules/tailwindcss/lib/cli.js这个文件不存在，所以现在换成了v3.4.1版本，但问题还是没解决。另外FontAwesome图标也显示不正常，希望大家能帮我排查下哪里出问题了！

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";
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";
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;

效果说明 #

• 当前页面完全没有应用Tailwind的样式，FontAwesome图标也无法正常显示，布局混乱
• 之前没配置tailwind.config.js里的content字段时，样式问题更严重
• 期望的效果是有整洁的侧边栏布局、美观的统计卡片，并且所有FontAwesome图标都能正常显示

备注：内容来源于stack exchange，提问作者Dronal Bhardwaj