Just experiment with line bottom

src/README.md

@@ -16,6 +16,20 @@ export function BorderSVG() {
     </svg>
   );
 }
+
+export function BorderBottomLineSVG() {
+  return (
+    <svg className="dashed-border-svg" aria-hidden="true">
+      <line
+        className="dashed-border-bottom-line"
+        x1="0"
+        x2="100%"
+        y1="100%"
+        y2="100%"
+      />
+    </svg>
+  );
+}
 ```
 
 and now you are ready to make your borders
@@ -32,6 +46,7 @@ and now you are ready to make your borders
 - dashed-border
 - dashed-border-svg
 - dashed-border-rect
+- dashed-border-bottom-line
 
 ## Configuration
 - dashed-border-color-[color]
@@ -45,4 +60,4 @@ and now you are ready to make your borders
 ## Vanilla extended
 - duration-[time] 
 - [timing function] (easing-linear, ease-in-out, etc.)
-- transition-all
+- transition-all

src/index.ts

@@ -256,6 +256,17 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         height: INNER_SIZE,
         rx: ADJUSTED_RADIUS,
       },
+      ".dashed-border-bottom-line": {
+        fill: "none",
+        stroke: "var(--tw-dashed-border-color)",
+        "stroke-width": "var(--tw-dashed-border-width)",
+        "stroke-dasharray":
+          "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
+        "stroke-dashoffset": "var(--tw-dashed-border-offset)",
+        // "stroke-linecap": "butt",
+        "vector-effect": "non-scaling-stroke",
+        transform: `translateY(${INSET})`,
+      },
     });
 
     const spacingRawValues = theme("spacing") as
@@ -339,17 +350,27 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
     }
     const ALL_TRANSITION_PROPERTIES =
       "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
+    const ALL_LINE_TRANSITION_PROPERTIES =
+      "stroke-dasharray, stroke-dashoffset, stroke-width, stroke, transform";
     addUtilities({
       ".dashed-border.transition .dashed-border-rect": createTransitionStyles(
         ALL_TRANSITION_PROPERTIES,
       ),
+      ".dashed-border.transition .dashed-border-bottom-line":
+        createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
       ".dashed-border.transition-all .dashed-border-rect":
         createTransitionStyles(ALL_TRANSITION_PROPERTIES),
+      ".dashed-border.transition-all .dashed-border-bottom-line":
+        createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
       ".dashed-border.transition-colors .dashed-border-rect":
         createTransitionStyles("stroke"),
+      ".dashed-border.transition-colors .dashed-border-bottom-line":
+        createTransitionStyles("stroke"),
 
       ".dashed-border.transition-dashed-border .dashed-border-rect":
         createTransitionStyles(ALL_TRANSITION_PROPERTIES),
+      ".dashed-border.transition-dashed-border .dashed-border-bottom-line":
+        createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
     });
   },
 );