diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts
index 5b9c8629ea..e5096cc606 100644
--- a/packages/preset-mini/src/index.ts
+++ b/packages/preset-mini/src/index.ts
@@ -1,4 +1,4 @@
-import type { Postprocessor, Preset, PresetOptions } from '@unocss/core'
+import type { Postprocessor, Preflight, PreflightContext, Preset, PresetOptions } from '@unocss/core'
 import { preflights } from './preflights'
 import { rules } from './rules'
 import type { Theme, ThemeAnimation } from './theme'
@@ -74,7 +74,7 @@ export const presetMini = (options: PresetMiniOptions = {}): Preset<Theme> => {
     postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
       ? VarPrefixPostprocessor(options.variablePrefix)
       : undefined,
-    preflights: options.preflight ? preflights : [],
+    preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }
 }
@@ -90,3 +90,18 @@ export function VarPrefixPostprocessor(prefix: string): Postprocessor {
     })
   }
 }
+
+export function normalizePreflights(preflights: Preflight[], variablePrefix?: string) {
+  if (variablePrefix && variablePrefix !== 'un-') {
+    return preflights.map(p => ({
+      ...p,
+      getCSS: (() => async (ctx: PreflightContext) => {
+        const css = await p.getCSS(ctx)
+        if (css)
+          return css.replace(/--un-/g, `--${variablePrefix}`)
+      })(),
+    }))
+  }
+
+  return preflights
+}
diff --git a/packages/preset-uno/src/index.ts b/packages/preset-uno/src/index.ts
index 2d65b7fd70..5012d61e59 100644
--- a/packages/preset-uno/src/index.ts
+++ b/packages/preset-uno/src/index.ts
@@ -1,7 +1,7 @@
 import type { Preset } from '@unocss/core'
 import type { PresetMiniOptions, Theme } from '@unocss/preset-mini'
 import { rules, shortcuts, theme, variants } from '@unocss/preset-wind'
-import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini'
+import { VarPrefixPostprocessor, normalizePreflights, preflights } from '@unocss/preset-mini'
 import { variantColorMix } from './variants/mix'
 
 export type { Theme }
@@ -26,7 +26,7 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset<Theme> => {
     postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
       ? VarPrefixPostprocessor(options.variablePrefix)
       : undefined,
-    preflights: options.preflight ? preflights : [],
+    preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }
 }
diff --git a/packages/preset-wind/src/index.ts b/packages/preset-wind/src/index.ts
index 84ace1d859..700b549223 100644
--- a/packages/preset-wind/src/index.ts
+++ b/packages/preset-wind/src/index.ts
@@ -1,6 +1,6 @@
 import type { Preset } from '@unocss/core'
 import type { PresetMiniOptions, Theme } from '@unocss/preset-mini'
-import { VarPrefixPostprocessor, preflights } from '@unocss/preset-mini'
+import { VarPrefixPostprocessor, normalizePreflights, preflights } from '@unocss/preset-mini'
 import { rules } from './rules'
 import { shortcuts } from './shortcuts'
 import { theme } from './theme'
@@ -29,7 +29,7 @@ export const presetWind = (options: PresetWindOptions = {}): Preset<Theme> => {
     postprocess: options.variablePrefix && options.variablePrefix !== 'un-'
       ? VarPrefixPostprocessor(options.variablePrefix)
       : undefined,
-    preflights: options.preflight ? preflights : [],
+    preflights: options.preflight ? normalizePreflights(preflights, options.variablePrefix) : [],
     prefix: options.prefix,
   }
 }
diff --git a/test/__snapshots__/preflights.test.ts.snap b/test/__snapshots__/preflights.test.ts.snap
index 76c6f1f04c..0ab6982f83 100644
--- a/test/__snapshots__/preflights.test.ts.snap
+++ b/test/__snapshots__/preflights.test.ts.snap
@@ -16,3 +16,8 @@ exports[`preflights > preflight root can be customized with string 1`] = `
 "/* layer: preflights */
 :root{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}"
 `;
+
+exports[`preflights > preflight with variablePrefix 1`] = `
+"/* layer: preflights */
+*,::before,::after{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0,0,0,0);--test-ring-shadow:0 0 rgba(0,0,0,0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0,0,0,0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147,197,253,0.5);}::backdrop{--test-rotate:0;--test-rotate-x:0;--test-rotate-y:0;--test-rotate-z:0;--test-scale-x:1;--test-scale-y:1;--test-scale-z:1;--test-skew-x:0;--test-skew-y:0;--test-translate-x:0;--test-translate-y:0;--test-translate-z:0;--test-ring-offset-shadow:0 0 rgba(0,0,0,0);--test-ring-shadow:0 0 rgba(0,0,0,0);--test-shadow-inset: ;--test-shadow:0 0 rgba(0,0,0,0);--test-ring-inset: ;--test-ring-offset-width:0px;--test-ring-offset-color:#fff;--test-ring-width:0px;--test-ring-color:rgba(147,197,253,0.5);}"
+`;
diff --git a/test/preflights.test.ts b/test/preflights.test.ts
index 2e826250e4..443007543b 100644
--- a/test/preflights.test.ts
+++ b/test/preflights.test.ts
@@ -83,4 +83,16 @@ describe('preflights', () => {
     const { css } = await uno.generate('')
     expect(css).eql('')
   })
+
+  test('preflight with variablePrefix', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetMini({
+          variablePrefix: 'test-',
+        }),
+      ],
+    })
+    const { css } = await uno.generate('')
+    expect(css).toMatchSnapshot()
+  })
 })