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:

@import "tailwindcss";
@plugin "tailwind-dashed-border"; 

then prepare a component for svg, or copy this shape everywhere you want to use it.

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

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