Next.js项目中TailwindCSS样式无法正常生效，求解决方法

不知为何我的TailwindCSS无法正常工作，是不是我遗漏了什么？我尝试给按钮应用样式，但毫无效果，按钮仍是默认样式。如果只保留@tailwind utilities;指令，按钮会变成圆角，但没有其他CSS样式。求解决方法？

tailwind.config.js #

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

global.css #

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

layout.js（主入口文件） #

import 'app/global.css'

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}
 
export default function RootLayout({ children }) {
 return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

package.json #

{
  "name": "smashorpass",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "^10.4.15",
    "dayjs": "^1.11.9",
    "embla-carousel-react": "8.0.0-rc12",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "v13.3.1-canary.03",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "^3.3.3"
  }
}

component.jsx #

'use client'
import { useRouter } from 'next/navigation';

export default function SaveButton() {
    return (<button class="rounded-full">Save Changes</button>)
}

内容的提问来源于stack exchange，提问作者Marta flores calvo