Tailwind CSS not working with downgraded NextJS

I had a perfectly running Next 14.2.3 project which I had to downgrade to 14.1.4 due to an issue with agora-rtm-sdk. But after downgrading all my CSS has sort of vanished. How can I fix this?

This is my tailwind.config.ts file

import type { Config } from "tailwindcss";
import daisyui from "daisyui";

const config: Config = {
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#E84644",
          secondary: "#111111",
          "base-200": "#111111",
          "base-100": "#292929",
          success: "#24B833",
          info: "#1E1E1E"
        },
      },
    ],
  },
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/Components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [daisyui],
};
export default config;

postcss.config.mjs file

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

globals.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

the root layout.tsx file

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "../globals.css";
import Navbar from "@/Components/Desktop/Navbar/Navbar";

const poppins = Poppins({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Stranger Hub",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="dark">
      <body className={poppins.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

Solution

If someone faced the same problem while downgrading from 14.2.3 to 14.1.4 then this can be fixed by following these steps.

Firstly, rename the postcss.config.mjs file to postcss.config.js and replace the contents with:

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

Now, install autoprefixer as dev dependency, you can also downgrade tailwind

"autoprefixer": "^10.0.1",
"tailwindcss": "^3.3.0",

Finally, delete the .next folder and rebuild the app

PS: I figured this out by making a new 14.1.4 NextJS app and looking at the differences....maybe there's another way to fix this but for now this worked for me.