Disabling Preflight on Tailwind v4 is not working!

[R4Ajeti]

Disabling Preflight on Tailwind v4 is not working!
I have a project in nextjs + typescript + tailwind CSS.
node --version
v23.2.0
{
"@tailwindcss/postcss": "^4.0.17",
"next": "^14.2.25",
"tailwind-merge": "^3.0.2",
"tw-animate-css": "^1.2.4"

devDep

"postcss": "^8.5.3",
"tailwindcss": "^4.0.17"
}

I need h1-h6 tag to be the same as always been, not like this:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

What I tried
1# this is my "tailwind.config.js" after adding corePlugins['preflight'] = false:

module.exports = {
    content: [
        "./src/**/*.{js,ts,jsx,tsx}"
    ],
    theme: {
      extend: {
        fontSize: {
          '2em': '2em',
        },
        animation: {
          marquee: 'marquee 15s linear infinite',
        },
        keyframes: {
          marquee: {
            '0%': { transform: 'translateX(0)' },
            '100%': { transform: 'translateX(-50%)' },
          },
        },
      },
    },
    plugins: [],
    corePlugins: {
      preflight: false,
    },
}

result; "didn't work"

2# This is my "globals.css" after reading this doc -> https://tailwindcss.com/docs/preflight#disabling-preflight and some issues on github:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
  h3 {
    font-size: var(--text-lg);
  }
  a {
    color: var(--color-blue-600);
    text-decoration-line: underline;
  }
}
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities);

result; "didn't work"

3# I also tried adding this <h1 className="text-8xl font-bold my-4">{name}</h1> on my tsx, but still I am not able to make h1 get font-size: 2em; instead I get value inherit.
result; "didn't work"

NOTE: Not sure what I am doing wrong or if someone else has the same issue, but I am completely new to Tailwind