preparing to publication

README.md

@@ -1,12 +1,18 @@
 # Tailwind Dashed Border SVG
 
-A plugin for adressing issue with custamable and animatable dashed border via tailwind interface (mostly).
+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. Non animated border coming soon.
+It uses real svg under the hood what provide the maximum flexibility.
 
 # Setup
 
-prepare a component for svg
+for the tailwind v4 use: 
+```css
+@import "tailwindcss";
+@plugin "tailwind-dashed-border"; 
+```
+
+then prepare a component for svg, or copy this shape everywhere you want to use it.
 
 ```tsx
 export function BorderSVG() {
@@ -26,23 +32,27 @@ and now you are ready to make your borders
 </div>
 ```
 
+# Usage 
+
+
+
 # Properties
 
 ## Setup
-- dashed-border
+- `dashed-border`
-- dashed-border-svg
+- `dashed-border-svg`
-- dashed-border-rect
+- `dashed-border-rect`
 
 ## Configuration
-- dashed-border-color-[color]
+- `dashed-border-color-[color]`
-- dashed-border-width-[spacing]
+- `dashed-border-width-[spacing]`
-- dashed-border-length-[spacing]
+- `dashed-border-length-[spacing]`
-- dashed-border-gap-[spacing]
+- `dashed-border-gap-[spacing]`
-- dashed-border-offset-[spacing]
+- `dashed-border-offset-[spacing]`
-- dashed-border-align-["inside"/"edge"/"outside"]
+- `dashed-border-align-["inside"/"edge"/"outside"]`
-- dashed-border-align-[spacing] (0 - inside, toward the outside)
+- `dashed-border-align-[spacing]` (0 - inside, 1 - outside, etc.)
 
 ## Vanilla extended
-- duration-[time] 
+- `duration-[time]` 
-- [timing function] (easing-linear, ease-in-out, etc.)
+- `[timing function]` (`easing-linear`, `ease-in-out`, etc.)
-- transition-all
+- `transition-all` - animation may not work without it.

package.json

@@ -2,6 +2,7 @@
   "name": "tailwind-dashed-border",
   "version": "0.1.0",
   "description": "Configurable dashed border utility for Tailwind CSS v4",
+  "author": "Mira Gluhih",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

src/index.ts

@@ -163,15 +163,9 @@ function toCssVariable(
 
 const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
   ({ addBase, addUtilities, theme, ...pluginApi }) => {
-    // const matchUtilities = pluginApi.matchUtilities;
     const matchUtilities = betterMatchUtility(pluginApi.matchUtilities);
 
-    const DEFAULT_GAP = "0.5rem";
-    const DEFAULT_LENGTH = "0.75rem";
-    const DEFAULT_OFFSET = "0px";
-    const DEFAULT_WIDTH = "1px";
     const DEFAULT_COLOR = "currentColor";
-    const DEFAULT_RADIUS = "0px";
 
     addBase({
       "@property --tw-dashed-border-gap": {
@@ -216,14 +210,9 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
       },
       ".dashed-border": {
         position: "relative",
-        // "--tw-dashed-border-gap": DEFAULT_GAP,
-        // "--tw-dashed-border-length": DEFAULT_LENGTH,
-        // "--tw-dashed-border-offset": DEFAULT_OFFSET,
-        // "--tw-dashed-border-width": DEFAULT_WIDTH,
         "--tw-dashed-border-color": DEFAULT_COLOR,
         "--tw-dashed-border-ease": "var(--tw-ease)",
         "--tw-dashed-border-duration": "var(--tw-duration)",
-        // "--tw-dashed-border-radius": DEFAULT_RADIUS,
       },
       ".dashed-border-svg": {
         position: "absolute",