Next.js项目使用Tailwind CSS @apply语法报错求助

我搭建了一个简易Next.js项目，在使用Tailwind CSS的@apply语法时出现报错，已经尝试重新安装所有所需依赖包，但问题仍未解决，希望能得到帮助。

以下是项目相关配置文件信息：

1. package.json配置 #

{
  "name": "simon-bask-health-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prepare": "husky install"
  },
  "dependencies": {
    "-": "^0.0.1",
    "@react-google-maps/api": "^2.19.2",
    "chart.js": "^4.4.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "flowbite": "^1.8.1",
    "flowbite-react": "^0.6.4",
    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
    "next": "13.5.4",
    "path": "^0.12.7",
    "react": "^18",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18",
    "save-dev": "^0.0.1-security"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.5",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

2. tailwind.config.js配置 #

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        textColor: "#111",
      },
      fontFamily: {
        inter: ["var(--font-inter)"],
        sulphur: ["var(--font-sulphur-point)"],
        roboto: ["var(--font-roboto)"],
      },
      backgroundColor: {
        buttonBackgroundColor: "#404040",
        hoverButtonBackgroundColor: "#000",
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};
export default config;

3. postcss.config.js配置 #

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

4. global.css配置（h1元素使用了@apply语法） #

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

body {
  margin: 0;
}

button {
  cursor: pointer;
}

h1 {
  @apply text-sm;
}

@layer {
  //Classes to hide scroll bar
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

内容的提问来源于stack exchange，提问作者Simon