clarify the docks

Solution:
- it happen as css think it like offseting the view on dasharray, so it moves backward, as I get it.
- But in our context better make it intuitive... so multiply by -1 to slide the line itself. (to the right).

README.md

@@ -62,14 +62,16 @@ and now you are ready to make your borders
 
 ## Configuration
 - `dashed-border-color-[color]`
-- `dashed-border-width-[spacing]`
+- `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-[spacing]` (0 - inside, 1 - outside, etc.)
+- `dashed-border-align-[[number]]` - example `dashed-border-align-[0.4]` (0 - inside, 0.5 - edge, 1 - outside, etc.)
 
 ## Vanilla extended
-- `duration-[time]` 
+- `duration-[ms]` 
 - `[timing function]` (`easing-linear`, `ease-in-out`, etc.)
-- `transition-all` - animation may not work without it.
+- `transition` - allow transition for all border properties.
+- `transition-all` - allow transition for all border properties.
+- `transition-dashed-border` - to target only dashed border transitions.

src/index.ts

@@ -216,6 +216,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       },
       ".dashed-border-svg": {
         position: "absolute",
+        overflow: "visible",
         inset: "0",
         width: "100%",
         height: "100%",
@@ -237,7 +238,7 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
         "stroke-width": "var(--tw-dashed-border-width)",
         "stroke-dasharray":
           "var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
-        "stroke-dashoffset": "var(--tw-dashed-border-offset)",
+        "stroke-dashoffset": "calc(-1 * var(--tw-dashed-border-offset))",
         "vector-effect": "non-scaling-stroke",
         x: INSET,
         y: INSET,