Arbitrary width and height classes like max-w-[500px] not applying after upgrading from v3

I'm using tailwindcss in nextjs and encountered this problem after running npx @tailwindcss/upgrade to upgrade from tailwind v3 to latest v4.

Basically nothing with width or height apply anymore. No changes were made to tailwind.config.ts, only a few changes to global.css after running the upgrade command. I tried running the build script and width and height are still in the dist/style.css, but they are missing when inspecting with browser devtool. Really don't know how to solve this so please help :(

Doing this works though:

<div style={{ maxWidth: "50rem", height: "400px", margin: "auto", backgroundColor: "#fee2e2" }}>

This is my global.css

@import './modal.css' layer(base);
@import './print.css' layer(base);

@import 'tailwindcss';

@config '../../tailwind.config.ts';

:root {
  --breakpoint-desktop-content: 77rem;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

body {
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

my tailwind.config.ts

import type { Config } from "tailwindcss"

const config: Config = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/utils/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
    // My custom stuff
    }
  },
  plugins: [],
}
export default config

my test code:

<div className="max-w-[500px] bg-red-100 mx-auto h-[400px]">LOL</div>

Width and height don't appear in styles inspection at all

How it looks in devtool

I also tried to remove tailwind.config.ts and keep global.css minimal and width and height classes still don't work.