# 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 this in your css file: 
```css
@import "tailwindcss";
@plugin "tailwind-dashed-border"; 
```

then prepare a component for svg in case you don't want repeat yourself everywhere. I will show it as it would look in React, but similar approach should work in any framework.

```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 Example

```tsx
<div
  className="
    px-14 py-10 bg-purple-900 rounded-2xl text-2xl

    dashed-border dashed-border-width-5 dashed-border-color-orange-600
    dashed-border-align-edge
    duration-300 ease-in-out transition-all
    dashed-border-gap-0 dashed-border-length-9
    hover:dashed-border-gap-3 hover:dashed-border-length-6 
    dashed-border-offset-2.5 hover:dashed-border-offset-1
    "
>
  <DashedBorderSvg />
  <div>Content</div>
</div>
```
![output](./assets/example.webp)

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