Mira
48 lines
1.0 KiB
Markdown
48 lines
1.0 KiB
Markdown
# Tailwind Dashed Border SVG
|
|
|
|
A plugin for adressing issue with custamable and animatable dashed border via tailwind interface (mostly).
|
|
|
|
It uses real svg under the hood what provide the maximum flexibility. Non animated border coming soon.
|
|
|
|
# Setup
|
|
|
|
prepare a component for svg
|
|
|
|
```tsx
|
|
export function BorderSVG() {
|
|
return (
|
|
<svg className="dashed-border-svg" aria-hidden="true">
|
|
<rect className="dashed-border-rect" />
|
|
</svg>
|
|
);
|
|
}
|
|
```
|
|
|
|
and now you are ready to make your borders
|
|
|
|
```tsx
|
|
<div className="dashed-border">
|
|
<BorderSVG/>
|
|
</div>
|
|
```
|
|
|
|
# Properties
|
|
|
|
## Setup
|
|
- dashed-border
|
|
- dashed-border-svg
|
|
- dashed-border-rect
|
|
|
|
## Configuration
|
|
- dashed-border-color-[color]
|
|
- dashed-border-width-[spacing]
|
|
- dashed-border-length-[spacing]
|
|
- dashed-border-gap-[spacing]
|
|
- dashed-border-offset-[spacing]
|
|
- dashed-border-align-["inside"/"edge"/"outside"]
|
|
- dashed-border-align-[spacing] (0 - inside, toward the outside)
|
|
|
|
## Vanilla extended
|
|
- duration-[time]
|
|
- [timing function] (easing-linear, ease-in-out, etc.)
|
|
- transition-all |