Mira
0a25911ba9
Steps: - Write a README to understand what do I really want to have. - Go line by line and get learn how it work. - Rework a lot of shit into sustainable form. - Understanding how tw work make me mad, so BetterMatchUtility was created - it separated default values (such as xl or 3 which will be shown as a tip), bare values (19 - as default but out of range), and arbitrary (like *-[5vw]). P.S. AI is so bad in 2026, if it have choose between two evil it for sure take both, and that not good thing. And it's struggle to make any good design. And did not able see what it do clearly. But so great for exploration thought.
52 lines
1.1 KiB
Markdown
52 lines
1.1 KiB
Markdown
# 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
|
|
|
|
```
|
|
pnpm i tailwind-dashed-border
|
|
```
|
|
|
|
prepare a component for svg
|
|
|
|
```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>
|
|
```
|
|
|
|
# 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 |