Return align function!

src/index.ts

@@ -8,14 +8,8 @@ import type {
 } from "tailwindcss/plugin";
 import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
 
-const DASH_ARRAY = "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)";
-const INSET = "calc(var(--tw-dashed-border-width) / 2)";
-const INNER_SIZE = "calc(100% - var(--tw-dashed-border-width))";
-const ADJUSTED_RADIUS =
-  "max(0px, calc(var(--tw-dashed-border-radius) - (var(--tw-dashed-border-width) / 2)))";
-
 const ALL_TRANSITION_PROPERTIES =
-  "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx";
+  "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
 const COLOR_TRANSITION_PROPERTIES = "stroke";
 const TRANSITION_DURATION =
   "var(--tw-duration, var(--default-transition-duration))";
@@ -197,29 +191,34 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
 
     addBase({
       "@property --tw-dashed-border-gap": {
-        syntax: "<length>",
+        syntax: "\"<length>\"",
         inherits: "true",
-        "initial-value": DEFAULT_GAP,
+        "initial-value": "8px",
       },
       "@property --tw-dashed-border-length": {
-        syntax: "<length>",
+        syntax: "\"<length>\"",
         inherits: "true",
-        "initial-value": DEFAULT_LENGTH,
+        "initial-value": "10px",
       },
       "@property --tw-dashed-border-offset": {
-        syntax: "<length>",
+        syntax: "\"<length>\"",
         inherits: "true",
-        "initial-value": DEFAULT_OFFSET,
+        "initial-value": "0px",
       },
       "@property --tw-dashed-border-width": {
-        syntax: "<length>",
+        syntax: "\"<length>\"",
         inherits: "true",
         "initial-value": "1px",
       },
       "@property --tw-dashed-border-radius": {
-        syntax: "<length>",
+        syntax: "\"<length>\"",
         inherits: "true",
-        "initial-value": DEFAULT_RADIUS,
+        "initial-value": "currentColor",
+      },
+      "@property --tw-dashed-border-alignment": {
+        syntax: "\"<number>\"",
+        inherits: "true",
+        "initial-value": "0",
       },
       ".dashed-border": {
         position: "relative",
@@ -237,11 +236,19 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         height: "100%",
         "pointer-events": "none",
       },
-      ".dashed-border-rect": {
+  });
+
+
+  const INSET = "calc((0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width))";
+  const INNER_SIZE = "calc(100% + var(--tw-dashed-border-width) * (2 * var(--tw-dashed-border-alignment) - 1))";
+  const ADJUSTED_RADIUS =
+    "max(0px, calc(var(--tw-dashed-border-radius) - (0.5 - var(--tw-dashed-border-alignment)) * var(--tw-dashed-border-width)))";
+
+  addBase({".dashed-border-rect": {
         fill: "none",
         stroke: "var(--tw-dashed-border-color)",
         "stroke-width": "var(--tw-dashed-border-width)",
-        "stroke-dasharray": DASH_ARRAY,
+        "stroke-dasharray": "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
         "stroke-dashoffset": "var(--tw-dashed-border-offset)",
         "vector-effect": "non-scaling-stroke",
         x: INSET,
@@ -250,7 +257,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         height: INNER_SIZE,
         rx: ADJUSTED_RADIUS,
       },
-    });
+    })
 
     const spacingRawValues = theme("spacing") as
       | ConfigValuesTree<string>
@@ -278,6 +285,16 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         utilityName: "dashed-border-offset",
         supportsNegativeValues: true,
       }),
+      {
+        utilityName: "dashed-border-align",
+        arbitraryValueResolver: toCssVariable("--tw-dashed-border-alignment"),
+        defaultValues: {
+          inside: "0",
+          edge: "0.5",
+          outside: "1",
+        },
+        type: "number",
+      },
       {
         utilityName: "dashed-border-width",
         arbitraryValueResolver: toCssVariable("--tw-dashed-border-width"),