diff --git a/src/components/box/Box.stories.tsx b/src/components/box/Box.stories.tsx
index 50063cb..914aa0f 100644
--- a/src/components/box/Box.stories.tsx
+++ b/src/components/box/Box.stories.tsx
@@ -602,3 +602,17 @@ export const CustomList: Story = {
     );
   },
 };
+
+export const DeviceDependingPositioning: Story = {
+  render() {
+    return (
+      <Box
+        d={{ position: { type: "fixed", top: "100px" } }}
+        md={{ position: { type: "relative", top: "auto" } }}
+        position={{ type: "absolute", top: 10, left: 10 }}
+      >
+        Position Test
+      </Box>
+    );
+  },
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2b61a8a..de46861 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -74,11 +74,31 @@ const generatePosition = (): Array<string> => {
     "md:right-[var(--mdPositionRight)]",
     "md:bottom-[var(--mdPositionBottom)]",
     "md:z-[var(--mdPositionZ)]",
-    "d:top-[var(--dPositionTop)]",
-    "d:left-[var(--dPositionLeft)]",
-    "d:right-[var(--dPositionRight)]",
-    "d:bottom-[var(--dPositionBottom)]",
-    "d:z-[var(--dPositionZ)]",
+    "md:top-auto",
+    "md:left-auto",
+    "md:right-auto",
+    "md:bottom-auto",
+    "md:absolute",
+    "md:fixed",
+    "md:relative",
+    "md:sticky",
+    "md:static",
+    "md:inherit",
+    "lg:top-[var(--dPositionTop)]",
+    "lg:left-[var(--dPositionLeft)]",
+    "lg:right-[var(--dPositionRight)]",
+    "lg:bottom-[var(--dPositionBottom)]",
+    "lg:z-[var(--dPositionZ)]",
+    "lg:top-auto",
+    "lg:left-auto",
+    "lg:right-auto",
+    "lg:bottom-auto",
+    "lg:absolute",
+    "lg:fixed",
+    "lg:relative",
+    "lg:sticky",
+    "lg:static",
+    "lg:inherit",
   ];
 };
 const generateCursorClasses = (): Array<string> => {