Tailwind CSS Installation with Next.js

Question

I am trying to use these versions of tailwind and next js together, but when I try to build I get the error described below. I'm sure it's the interplay of the two since when I remove the tailwind component imports the build runs successfully. I have attached the configuration files that I have in the project. Which version of next is compatible with which version of tailwind? Any advice on how to handle this?

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

module.exports = nextConfig;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

package.json 

{
    "name": "web-portfolio",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@heroicons/react": "2.0.18",
        "@material-tailwind/react": "^2.1.2",
        "build": "^0.1.4",
        "next": "^13.4.0",
        "npm": "^10.4.0",
        "react": "18",
        "react-dom": "18",
        "run": "^1.5.0",
    },
    "devDependencies": {
        "@types/node": "20",
        "@types/react": "18",
        "@types/react-dom": "18",
        "autoprefixer": "^10.4.17",
        "eslint": "8",
        "eslint-config-next": "13.5.4",
        "postcss": "^8.4.35",
        "tailwindcss": "^2.2.19",
        "typescript": "5"
    }
}

ERROR:

npm run build

> [email protected] build
> next build

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (3/4)  [ ===] 

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
RangeError: Maximum call stack size exceeded
    at P (/home/john/projects/web-portfolio/.next/server/chunks/362.js:5:246382)
    at l (/home/john/projects/web-portfolio/.next/server/chunks/362.js:5:241955)
    at /home/john/projects/web-portfolio/.next/server/chunks/362.js:5:243156
    at Array.forEach (<anonymous>)
    at /home/john/projects/web-portfolio/.next/server/chunks/362.js:5:243129
    at Array.forEach (<anonymous>)
    at a (/home/john/projects/web-portfolio/.next/server/chunks/362.js:5:242949)
    at /home/john/projects/web-portfolio/.next/server/chunks/362.js:5:243213
    at Array.forEach (<anonymous>)
 ✓ Generating static pages (4/4) 

> Export encountered errors on following paths:
        /page: /
    ```