diff --git a/packages/calcite-components/tailwind.config.ts b/packages/calcite-components/tailwind.config.ts
index dc752819353..ac394533f27 100644
--- a/packages/calcite-components/tailwind.config.ts
+++ b/packages/calcite-components/tailwind.config.ts
@@ -27,15 +27,15 @@ const config: Config = {
           "outline-color": "transparent",
         },
         ".focus-normal": {
-          outline: "2px solid var(--calcite-internal-color-focus)",
+          outline: "var(--calcite-border-width-md) solid var(--calcite-internal-color-focus)",
         },
         ".focus-outset": {
-          outline: "2px solid var(--calcite-internal-color-focus)",
-          "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
+          outline: "var(--calcite-border-width-md) solid var(--calcite-internal-color-focus)",
+          "outline-offset": invert("var(--calcite-spacing-base)", "--calcite-offset-invert-focus"),
         },
         ".focus-inset": {
-          outline: "2px solid var(--calcite-internal-color-focus)",
-          "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
+          outline: "var(--calcite-border-width-md) solid var(--calcite-internal-color-focus)",
+          "outline-offset": invert("calc(-1 * var(--calcite-spacing-base))", "--calcite-offset-invert-focus"),
         },
       });
     }),
diff --git a/packages/calcite-tailwind-preset/src/index.ts b/packages/calcite-tailwind-preset/src/index.ts
index 86b30860f41..1e9c3827b18 100644
--- a/packages/calcite-tailwind-preset/src/index.ts
+++ b/packages/calcite-tailwind-preset/src/index.ts
@@ -233,23 +233,26 @@ const config: Omit<Config, "content"> = {
           "outline-color": "transparent",
         },
         ".focus-normal": {
-          outline: "2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
+          outline:
+            "var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
         },
         ".focus-outset": {
-          outline: "2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
-          "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
+          outline:
+            "var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
+          "outline-offset": invert("var(--calcite-spacing-base)", "--calcite-offset-invert-focus"),
         },
         ".focus-inset": {
-          outline: "2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
-          "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
+          outline:
+            "var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))",
+          "outline-offset": invert("calc(-1 * var(--calcite-spacing-base))", "--calcite-offset-invert-focus"),
         },
         ".focus-outset-danger": {
-          outline: "2px solid var(--calcite-color-status-danger)",
-          "outline-offset": invert("2px", "--calcite-offset-invert-focus"),
+          outline: "var(--calcite-border-width-md) solid var(--calcite-color-status-danger)",
+          "outline-offset": invert("var(--calcite-spacing-base)", "--calcite-offset-invert-focus"),
         },
         ".focus-inset-danger": {
-          outline: "2px solid var(--calcite-color-status-danger)",
-          "outline-offset": invert("-2px", "--calcite-offset-invert-focus"),
+          outline: "var(--calcite-border-width-md) solid var(--calcite-color-status-danger)",
+          "outline-offset": invert("calc(-1 * var(--calcite-spacing-base))", "--calcite-offset-invert-focus"),
         },
         ".transition-default": {
           // we explicitly list these properties to avoid animating properties that are not intended to be animated and that might affect performance