Problems with V4 in Production vs. Development styles.

[immrjark]

What version of Tailwind CSS are you using?

I'm using the latest, v4.0.3 -> "tailwindcss": "^4.0.3" & "@tailwindcss/vite": "^4.0.3"

What build tool (or framework if it abstracts the build tool) are you using?

I'm using Astro Framework with its last version "astro": "^5.2.3", with React: "react": "^19.0.0", Tailwind: "@tailwindcss/vite": "^4.0.3" & "tailwindcss": "^4.0.3" & Vercel: "@astrojs/vercel": "^8.0.5".

What version of PNPM are you using?

I'm using pnpm version 8.7.4 and the Node version is v22.12.0.

What browser are you using?

I'm using Chrome for running my code in production and development but it works equally in Brave.

What operating system are you using?

macOS.

Reproduction URL

Here is the Play Tailwind URL: https://play.tailwindcss.com/M5wpML6IAv
Here is my open source repository: https://github.com/immrjark/mrjark-dot-com
And here is my website: https://mrjark.com

Describe your issue

The problems are as shown in the images below. The tailwind code does not match in production vs. in development.

In production the screen styles and React button functionalities, which used to work perfectly with the v3 version of tailwind, now don't work as I expect.

And the only change I made in my repository was to upgrade to tailwind v4.

[wongjn]

Might be related to #15794, see #15841 (comment)