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!

[wongjn]

Seems to be some bug in Docusaurus's build process. See this warning in the build logs:

Warning: {"file":"assets/css/styles.7e751abf.css","message":"assets/css/styles.7e751abf.css from Css Minimizer plugin\nInvalid character(s) 'all:unset;align-items:center;display:inline-flex' at assets/css/styles.7e751abf.css:25:28400. Ignoring.","compilerPath":"client"}

The CSS mentioned seems to match the button rule. So it seems something is tripping up Css Minimizer, and perhaps causing it to discard the CSS rule completely.

Edit

The CSS surrounding this with minification disabled is:

…--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}

@supports (color: color(display-p3 0 0 0%)){
:root,:host{--color-blue-400:rgb(86, 162, 255);--color-blue-500:rgb(50, 128, 255)}

@media (color-gamut: p3){
:root,:host{--color-blue-400:color(display-p3 0.39744 0.62813 0.99212);--color-blue-500:color(display-p3 0.26642 0.49122 0.98862)}
}
}}@layer base,components,utilities;button{all:unset;align-items:center;display:inline-flex}.absolute{position:absolute}.static{…

Whereas enabled:

--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}@supports (color:color(display-p3 0 0 0%)){:host,:root{--color-blue-400:#56a2ff;--color-blue-500:#3280ff}}}.static{…

Prettified and diffed:

   --default-transition-duration:.15s;
   --default-transition-timing-function:cubic-bezier(.4,0,.2,1)
 }

 @supports (color: color(display-p3 0 0 0%)){
   :root,:host{
-    --color-blue-400:rgb(86, 162, 255);
-    --color-blue-500:rgb(50, 128, 255)
+    --color-blue-400:#56a2ff;
+    --color-blue-500:#3280ff
 }
-
-@media (color-gamut: p3){
-  :root,:host{
-    --color-blue-400:color(display-p3 0.39744 0.62813 0.99212);
-    --color-blue-500:color(display-p3 0.26642 0.49122 0.98862)
-  }
-}
-
-@layer base,components,utilities;
-
-button{
-  all:unset;
-  align-items:center;
-  display:inline-flex
-}
-.absolute{position:absolute}
 .static{

I think it could be the @media (color-gamut: p3) or @layer or combination of the two tripping up Css Minimizer.

[mkosir]

Moved

button {
  all: unset;
  display: inline-flex;
  align-items: center;
}

to the bottom of the file, which did the trick. Disabling preflight still feels a bit hacky in the Docusaurus setup, but it works for now 🤷‍♂️
Thanks for the help!