React app not displaying TailwindCSS styles and FontAwesome icons properly in browser

Frontend
1

I’m encountering issues with my React project named analytics-portal where the styles are not appearing as expected when I run npm run start. The FontAwesome icons and TailwindCSS styles are failing to render in the browser.

Here’s the configuration for my package.json:

{
  "name": "analytics-portal",
  "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"
  }
}

This is my main component (MainApp.js):

import React, { useState, useEffect } from "react";
import NavigationPanel from "./components/NavigationPanel.js";
import StatCard from "./components/StatCard.js";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUsers, faChartBar, faDownload, faHeart } from "@fortawesome/free-solid-svg-icons";
import "./styles.css";

const MainApp = () => {
    const [metrics, setMetrics] = useState([]);
    const [activePage, setActivePage] = useState("Overview");

    useEffect(() => {
        setTimeout(() => {
            setMetrics([
                { icon: faUsers, title: "Users", count: "2,340", theme: "border-purple-500" },
                { icon: faChartBar, title: "Reports", count: "567", theme: "border-orange-500" },
                { icon: faDownload, title: "Downloads", count: "8,912", theme: "border-teal-500" },
                { icon: faHeart, title: "Favorites", count: "45,231", theme: "border-pink-500" }
            ]);
        }, 800);
    }, []);

    return (
        <div className="flex min-h-screen">
            <div className="w-60 bg-slate-900 text-white fixed h-full">
                <NavigationPanel onPageChange={setActivePage} />
            </div>
            <div className="flex-1 p-8 bg-slate-50 ml-60">
                <h1 className="text-2xl font-semibold">{activePage}</h1>
                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mt-6">
                    {metrics.map((metric, idx) => (
                        <StatCard key={idx} icon={metric.icon} title={metric.title} count={metric.count} theme={metric.theme} />
                    ))}
                </div>
            </div>
        </div>
    );
};

export default MainApp;

Here’s my tailwind.config.js file:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

This is my styles.css file:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

.container {
    display: flex;
    min-height: 100vh;
    background-color: #fafafa;
}

.nav-panel {
    width: 240px;
    background-color: #1a1a1a;
    padding: 24px;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.15);
}

.nav-panel h3 {
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    color: white;
}

.menu-list {
    list-style: none;
    padding: 16px 0;
}

.menu-item {
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #ccc;
}

.menu-item:hover {
    background-color: #333;
    border-radius: 6px;
}

.content-area {
    flex: 1;
    padding: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.stat-card {
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
}

.stat-icon {
    font-size: 32px;
    margin-right: 16px;
}

I’ve attempted to reinstall Tailwind several times and I’m currently using version 3.4.1. Since this is my first React project, I could be overlooking something fundamental. The styles simply don’t appear to load correctly when I start the server.

2

I had the exact same problem when I moved from create-react-app to a custom webpack setup. Your custom start script is skipping React’s normal build process that handles PostCSS and Tailwind compilation.

Since you’re running node scripts/start.js instead of react-scripts start, your build isn’t processing CSS imports properly. Those @import statements in styles.css need PostCSS with the Tailwind plugin to work.

Quick test: switch your start script back to "start": "react-scripts start" temporarily. If styles load fine, then your custom script needs PostCSS processing added. Make sure your webpack config includes postcss-loader with Tailwind as a plugin.

Or if you’re stuck with the custom script, try importing styles.css directly in index.js instead of at the component level. This forces it to get processed when the bundle builds.

3

Check if postcss.config.js is in your root directory. Even with tailwind init -p, it sometimes doesn’t create properly. Should look like:

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

Also remove any custom CSS in styles.css that overlaps with Tailwind classes - they’re probably conflicting.

4

are you importing the fontawesome core library? i see you’ve got the icons and react component, but you’re missing @fortawesome/fontawesome-svg-core. also, what’s the postinstall script for tailwind doing? that runs every time you npm install and might be messing with your configs. check your browser console - any errors showing up when it loads?