Can't resolve modules after creating tsconfig.json

I have a next.js 13 project which runs all fine.

Now I wanted to add a tsx component. As this requires typescript I did as the docs said:

touch tsconfig.json

But when I run npm run dev after, I start getting module not found errors:

$ npm run dev        

> tailwindui-salient@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/myuser/code/my-frontend/.env.development
info  - Loaded env from /Users/myuser/code/my-frontend/.env
We detected TypeScript in your project and created a tsconfig.json file for you.

error - ./src/pages/_app.jsx:4:0
Module not found: Can't resolve '@/styles/tailwind.css'
  2 | 
  3 | import 'focus-visible'
> 4 | import '@/styles/tailwind.css'
  5 | import { appWithTranslation } from 'next-i18next'
  6 | import { useEffect } from 'react'
  7 | import { init, push } from "@socialgouv/matomo-next";

https://nextjs.org/docs/messages/module-not-found

When I run npm run build it complains about many more imports with the @/… syntax.

My node version is v18.14.2.

Edit: Here is the generated tsconfig (this is generated by next.js, I haven't changed anything):

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

The generated tsconfig.json was missing these lines within compilerOptions:

"baseUrl": ".",
 "paths": {
   "@/*": ["src/*"]
 }

I copied this over from jsconfig.json - no idea why next.js did not add them when it generated the tsconfig.