diff --git a/src/README.md b/src/README.md
index f5ccc58..1bf132e 100644
--- a/src/README.md
+++ b/src/README.md
@@ -16,6 +16,20 @@ export function BorderSVG() {
);
}
+
+export function BorderBottomLineSVG() {
+ return (
+
+ );
+}
```
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
\ No newline at end of file
+- transition-all
diff --git a/src/index.ts b/src/index.ts
index 10df206..dc3c061 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -256,6 +256,17 @@ const dashedBorderPlugin: ReturnType = 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 = 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),
});
},
);