# 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.