77 lines
2.0 KiB
Markdown
77 lines
2.0 KiB
Markdown
# 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:
|
|
```css
|
|
@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.
|
|
|
|
```tsx
|
|
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
|
|
|
|
```tsx
|
|
<div className="dashed-border">
|
|
<BorderSVG/>
|
|
</div>
|
|
```
|
|
|
|
# Usage Example
|
|
|
|
```tsx
|
|
<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-[px]`
|
|
- `dashed-border-length-[spacing]`
|
|
- `dashed-border-gap-[spacing]`
|
|
- `dashed-border-offset-[spacing]`
|
|
- `dashed-border-align-["inside"/"edge"/"outside"]`
|
|
- `dashed-border-align-[[number]]` - example `dashed-border-align-[0.4]` (0 - inside, 0.5 - edge, 1 - outside, etc.)
|
|
|
|
## Vanilla extended
|
|
- `duration-[ms]`
|
|
- `[timing function]` (`easing-linear`, `ease-in-out`, etc.)
|
|
- `transition` - allow transition for all border properties.
|
|
- `transition-all` - allow transition for all border properties.
|
|
- `transition-dashed-border` - to target only dashed border transitions. |