Tailwind CSS does not load in React application

I checked the documentation several times and several stack overflow answers, but I can't seem to figure out what is wrong.

I tried to change the tailwind file content values several times and also the tail wind base, components and utilities to import. But was unsuccessful as well.

Here's some file snippets:

_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

global.css

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

@layer components {
  .sidebar-icon {
    @apply relative flex items-center justify-center 
      h-12 w-12 mt-2 mb-2 mx-auto
  }
  ...
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
   theme: {
    extend: {
      colors: {
        gray: {
          900: '#202225',
          ...
        },
      },
      spacing: {
        88: '22rem',
      },
    },
  },
  plugins: [],
}

The package.json file

{
  ...
  "dependencies": {
    "@craco/craco": "^6.4.5",
    "mobx": "^6.6.2",
    "mobx-react-lite": "^3.4.0",
    "next": "12.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@types/node": "18.7.16",
    "@types/react": "18.0.18",
    "@types/react-dom": "18.0.6",
    "eslint": "8.23.0",
    "eslint-config-next": "12.3.0",
    "tailwindcss": "^3.1.8",
    "typescript": "4.8.3"
  }
}

Project File Structure