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

prepare a component for svg

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>

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