Just experiment with line bottom

LICENSE

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2026 mira
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
+associated documentation files (the "Software"), to deal in the Software without restriction, including 
+without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
+copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial 
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 
+USE OR OTHER DEALINGS IN THE SOFTWARE.

src/README.md

@@ -6,10 +6,6 @@ It uses real svg under the hood what provide the maximum flexibility. Non animat
 
 # Setup
 
-```
-pnpm i tailwind-dashed-border
-```
-
 prepare a component for svg
 
 ```tsx
@@ -20,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
@@ -36,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]
@@ -49,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

@@ -197,7 +197,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       "@property --tw-dashed-border-radius": {
         syntax: '"<length>"',
         inherits: "true",
-        "initial-value": "currentColor",
+        "initial-value": "0px",
       },
       "@property --tw-dashed-border-alignment": {
         syntax: '"<number>"',
@@ -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),
     });
   },
 );