Error when I tried to import tailwindcss | Next.js | Page 1

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
TypeError: Cannot read properties of undefined (reading 'config')
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./styles/globals.css
./styles/globals.css

tailwind.config.js:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}```

globals.css:
```@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  @apply h-full bg-black
}

body {
  @apply h-full bg-black
}```

index.tsx:

  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}```

and those are the only parts of the code i touched

#Error when I tried to import tailwindcss