mira/tailwind-dashed-border
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Just experiment with line bottom

Browse Source
This commit is contained in:
Mira
2026-06-19 02:00:49 +03:00
parent 47d03a7c2c
commit bd83d28400
2 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/README.md
+16 -1
View File
@@ -16,6 +16,20 @@ export function BorderSVG() {
</svg> </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 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
- dashed-border-svg - dashed-border-svg
- dashed-border-rect - dashed-border-rect
- dashed-border-bottom-line
## Configuration ## Configuration
- dashed-border-color-[color] - dashed-border-color-[color]
@@ -45,4 +60,4 @@ and now you are ready to make your borders
## Vanilla extended ## Vanilla extended
- duration-[time] - duration-[time]
- [timing function] (easing-linear, ease-in-out, etc.) - [timing function] (easing-linear, ease-in-out, etc.)
- transition-all - transition-all
src/index.ts
+21
View File
@@ -256,6 +256,17 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
height: INNER_SIZE, height: INNER_SIZE,
rx: ADJUSTED_RADIUS, 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 const spacingRawValues = theme("spacing") as
@@ -339,17 +350,27 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
} }
const ALL_TRANSITION_PROPERTIES = const ALL_TRANSITION_PROPERTIES =
"stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height"; "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({ addUtilities({
".dashed-border.transition .dashed-border-rect": createTransitionStyles( ".dashed-border.transition .dashed-border-rect": createTransitionStyles(
ALL_TRANSITION_PROPERTIES, ALL_TRANSITION_PROPERTIES,
), ),
".dashed-border.transition .dashed-border-bottom-line":
createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
".dashed-border.transition-all .dashed-border-rect": ".dashed-border.transition-all .dashed-border-rect":
createTransitionStyles(ALL_TRANSITION_PROPERTIES), createTransitionStyles(ALL_TRANSITION_PROPERTIES),
".dashed-border.transition-all .dashed-border-bottom-line":
createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
".dashed-border.transition-colors .dashed-border-rect": ".dashed-border.transition-colors .dashed-border-rect":
createTransitionStyles("stroke"), createTransitionStyles("stroke"),
".dashed-border.transition-colors .dashed-border-bottom-line":
createTransitionStyles("stroke"),
".dashed-border.transition-dashed-border .dashed-border-rect": ".dashed-border.transition-dashed-border .dashed-border-rect":
createTransitionStyles(ALL_TRANSITION_PROPERTIES), createTransitionStyles(ALL_TRANSITION_PROPERTIES),
".dashed-border.transition-dashed-border .dashed-border-bottom-line":
createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
}); });
}, },
); );