Tailwind CSS在Next.js React应用中无法加载的问题求助

我多次查阅官方文档及Stack Overflow相关解答，仍无法定位Tailwind CSS在Next.js React应用中无法加载的问题。尝试修改tailwind.config.js的content配置项，以及调整globals.css中@tailwind base、components和utilities的引入，但均未解决问题。以下是相关文件片段：

_app.tsx #

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

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

export default MyApp

globals.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: [],
}

package.json #

{
  ...
  "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"
  }
}

项目文件结构 #

内容的提问来源于stack exchange，提问作者João Dias