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:

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

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 Example

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

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.