# 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

```
pnpm i tailwind-dashed-border
```

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