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), }); }, );