diff --git a/README.md b/README.md index f5ccc58..e2f25cd 100644 --- a/README.md +++ b/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 ``` +# Usage + + + # Properties ## Setup -- dashed-border -- dashed-border-svg -- dashed-border-rect +- `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) +- `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, 1 - outside, etc.) ## Vanilla extended -- duration-[time] -- [timing function] (easing-linear, ease-in-out, etc.) -- transition-all \ No newline at end of file +- `duration-[time]` +- `[timing function]` (`easing-linear`, `ease-in-out`, etc.) +- `transition-all` - animation may not work without it. \ No newline at end of file diff --git a/package.json b/package.json index 8bdcaa8..24cb24c 100644 --- a/package.json +++ b/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", diff --git a/src/index.ts b/src/index.ts index 10df206..e30a6db 100644 --- a/src/index.ts +++ b/src/index.ts @@ -163,15 +163,9 @@ function toCssVariable( const dashedBorderPlugin: ReturnType = 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 = 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",