Get started with tw-border in your Tailwind CSS v4 project.
npm install -D tw-border@beta
Add to your global stylesheet (e.g., app/globals.css
):
@import "tailwindcss";
@import "tw-border";
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>
border
, border-2
, border-3
, border-4
, or border-[5px]
Standard Tailwind color classes: border-neutral-900
, border-blue-500
, etc.
dash-2
, dash-4
, dash-6
, dash-8
, dash-12
, dash-24
, or dash-[16px]
dash-round
, dash-butt
, dash-square
Standard Tailwind radius classes: rounded-sm
, rounded-xl
, rounded-full
, etc.
border-animate
or hover:border-animate
Compatible with Chromium, WebKit, and Gecko engines.