Disable Preflight in Tailwind v4 (Docusaurus)

[mkosir]

What version of Tailwind CSS are you using?

v4.1.5 (latest)

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

Docusaurus 3.7

What version of Node.js are you using?

v22.15.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

See the styling of the Rule and Note buttons in the production build:

https://mkosir.github.io/typescript-style-guide/#array-types

Now run the same project locally (cd website && npm run start) and the buttons look correct

http://localhost:3000/typescript-style-guide/#array-types

Describe your issue

In Tailwind v3, I disabled Preflight in tailwind.config.ts:

corePlugins: {
    preflight: false, // disable Tailwind's reset -  don't wipe out the rest of Docusaurus styles
  },

This worked perfectly.

In Tailwind v4, I followed the docs and tried disabling Preflight via CSS (here) but the production build doesn’t behave the same as local dev—the button styles break in production.

Probably I'm missing something to correctly disable Preflight and apply custom css afterwards.

Thanks for any guidance!