Installation

Get started with tw-border in your Tailwind CSS v4 project.

Install

npm install -D tw-border@beta

Setup

Add to your global stylesheet (e.g., app/globals.css):

@import "tailwindcss";
@import "tw-border";

Usage

Create a container with border-dashed and add the SVG inside:

<div className="border-dashed border-2 border-neutral-900 dash-6 dash-round rounded-xl">
  <svg className="border-svg">
    <rect />
  </svg>
</div>

Available Classes

Border Width

border, border-2, border-3, border-4, or border-[5px]

Border Color

Standard Tailwind color classes: border-neutral-900, border-blue-500, etc.

Dash Size

dash-2, dash-4, dash-6, dash-8, dash-12, dash-24, or dash-[16px]

Dash Style

dash-round, dash-butt, dash-square

Border Radius

Standard Tailwind radius classes: rounded-sm, rounded-xl, rounded-full, etc.

Animation

border-animate or hover:border-animate

Browser Support

Compatible with Chromium, WebKit, and Gecko engines.

View on GitHub