diff --git a/packages/react/package.json b/packages/react/package.json
index d3eb1a324..107856457 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "keywords": [
     "React Native",
     "Next.js",
diff --git a/packages/react/src/utils/cssify/utils/common.ts b/packages/react/src/utils/cssify/utils/common.ts
index 7c9f9e1d5..c9c20998b 100644
--- a/packages/react/src/utils/cssify/utils/common.ts
+++ b/packages/react/src/utils/cssify/utils/common.ts
@@ -111,13 +111,14 @@ const createCssRule = (
   const colorModeRulePrefix = prefixColorMode
     ? `.${prefixColorMode}${colorMode}`
     : '';
+  const mediaQueryPrefix = `.gs`;
 
   const inlineAndStatePrefix = `${inlineRulePrefix}${stateRulePrefix}`;
 
   if (isMedia(mediaQuery) && isColorScheme(colorSchemeQuery)) {
-    return `${mediaQuery} {${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}}`;
+    return `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}}`;
   } else if (isMedia(mediaQuery)) {
-    return `${mediaQuery} {${inlineAndStatePrefix} ${dataMediaSelector} ${css}}`;
+    return `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix} ${dataMediaSelector} ${css}}`;
   } else if (isColorScheme(colorSchemeQuery)) {
     return `${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}`;
   } else {