58 lines
1.2 KiB
Markdown
58 lines
1.2 KiB
Markdown
# Tailwind Dashed Border SVG
|
|
|
|
A plugin for addressing issue with customizable and animatable dashed border via tailwind interface (mostly).
|
|
|
|
It uses real svg under the hood what provide the maximum flexibility.
|
|
|
|
# Setup
|
|
|
|
for the tailwind v4 use:
|
|
```css
|
|
@import "tailwindcss";
|
|
@plugin "tailwind-dashed-border";
|
|
```
|
|
|
|
then prepare a component for svg, or copy this shape everywhere you want to use it.
|
|
|
|
```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>
|
|
```
|
|
|
|
# Usage
|
|
|
|
|
|
|
|
# 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, 1 - outside, etc.)
|
|
|
|
## Vanilla extended
|
|
- `duration-[time]`
|
|
- `[timing function]` (`easing-linear`, `ease-in-out`, etc.)
|
|
- `transition-all` - animation may not work without it. |