{"_id":"@butterfail/tailwindcss-inverted-radius","_rev":"2-b8bf34adeff562c6732196c4a7440937","name":"@butterfail/tailwindcss-inverted-radius","description":"A plugin for Tailwind CSS v3.2+ that provides utilities to create inverted rounded corners for elements.","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@butterfail/tailwindcss-inverted-radius","version":"0.1.0","license":"MIT","_id":"@butterfail/tailwindcss-inverted-radius@0.1.0","maintainers":[{"name":"butterfail","email":"bonjour@gregoireciles.fr"}],"homepage":"https://github.com/butterfail/tailwindcss-inverted-radius#readme","bugs":{"url":"https://github.com/butterfail/tailwindcss-inverted-radius/issues"},"dist":{"shasum":"b094c18b995a89fbb3c600facbafebd2bdbb9736","tarball":"https://registry.npmjs.org/@butterfail/tailwindcss-inverted-radius/-/tailwindcss-inverted-radius-0.1.0.tgz","fileCount":5,"integrity":"sha512-uRd44UtXIjbyLVQxrT0gVW5CWpC1+Eu54u1EUtFWKt9TYGTNrZW5BajhGwctNKcTICO3BTSm/S67Q9XDTPUkiA==","signatures":[{"sig":"MEUCIA8EOdIcnbKvvXUO6IlfLPuixmKReTx1i7PnOi/dHxvfAiEA343pf9dxAwLVXCE5ttDlY6FdWwSD9GFpiu9RRK0QXiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12776},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"e56beffb949c893c0707e5773675a9be5468df70","scripts":{"dev":"npm run swcify -- --watch","build":"npm run swcify","swcify":"swc ./src/index.ts --out-dir ./dist","postbuild":"tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"_npmUser":{"name":"butterfail","email":"bonjour@gregoireciles.fr"},"prettier":{"semi":false,"printWidth":100,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/butterfail/tailwindcss-inverted-radius.git","type":"git"},"_npmVersion":"9.6.7","description":"A plugin for Tailwind CSS v3.2+ that provides utilities to create inverted rounded corners for elements.","directories":{},"_nodeVersion":"18.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"postcss":"^8.4.17","@swc/cli":"^0.1.57","prettier":"^2.7.1","@swc/core":"^1.3.7","typescript":"^4.8.4","tailwindcss":"0.0.0-insiders.7385373"},"peerDependencies":{"tailwindcss":">=3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-inverted-radius_0.1.0_1711826317037_0.08310161291869544","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@butterfail/tailwindcss-inverted-radius","version":"0.1.1","license":"MIT","_id":"@butterfail/tailwindcss-inverted-radius@0.1.1","maintainers":[{"name":"butterfail","email":"bonjour@gregoireciles.fr"}],"homepage":"https://github.com/butterfail/tailwindcss-inverted-radius#readme","bugs":{"url":"https://github.com/butterfail/tailwindcss-inverted-radius/issues"},"dist":{"shasum":"12c94be2c1f577d9cd529cd1c09ee888ed336256","tarball":"https://registry.npmjs.org/@butterfail/tailwindcss-inverted-radius/-/tailwindcss-inverted-radius-0.1.1.tgz","fileCount":5,"integrity":"sha512-M2BenwODayzSE9LrWqW8tjBNkuUXcQiNH9wEZ7JlE2YKkSybppIP64IWxVtlseRMyr5lzsX6TECgkP0OFwTmBw==","signatures":[{"sig":"MEYCIQDkpvfadF/xCvkqaBQo2A5Kc7Mo5/cDET+64s2T4S5tIQIhAIbr0fjTq1rO02mzAjOWvZu+koqoivKXoJPgbU2aNVn1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12913},"jest":{"transform":{"^.+\\.(t|j)sx?$":"@swc/jest"},"moduleNameMapper":{"^~/(.*)":"<rootDir>/$1"},"setupFilesAfterEnv":["<rootDir>/jest/custom-matchers.js"]},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"4b8e43ea8945064ad4f625aa7cfb38172464d13f","scripts":{"dev":"npm run swcify -- --watch","test":"jest","build":"npm run swcify","swcify":"swc ./src/index.ts --out-dir ./dist","postbuild":"tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"_npmUser":{"name":"butterfail","email":"bonjour@gregoireciles.fr"},"prettier":{"semi":false,"printWidth":100,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/butterfail/tailwindcss-inverted-radius.git","type":"git"},"_npmVersion":"9.6.7","description":"A plugin for Tailwind CSS v3.2+ that provides utilities to create inverted rounded corners for elements.","directories":{},"_nodeVersion":"18.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","postcss":"^8.4.17","@swc/cli":"^0.1.57","prettier":"^2.7.1","@swc/core":"^1.3.7","@swc/jest":"^0.2.36","typescript":"^4.8.4","@types/jest":"^29.5.12","tailwindcss":"0.0.0-insiders.7385373"},"peerDependencies":{"tailwindcss":">=3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/tailwindcss-inverted-radius_0.1.1_1711877408727_0.2937555271353198","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@butterfail/tailwindcss-inverted-radius","description":"A plugin for Tailwind CSS v3.2+ that provides utilities to create inverted rounded corners for elements.","version":"0.1.2","main":"dist/index.js","types":"dist/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/butterfail/tailwindcss-inverted-radius.git"},"publishConfig":{"access":"public"},"scripts":{"test":"jest","swcify":"swc ./src/index.ts --out-dir ./dist","build":"npm run swcify","dev":"npm run swcify -- --watch","postbuild":"tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"prettier":{"printWidth":100,"semi":false,"singleQuote":true,"trailingComma":"es5"},"jest":{"setupFilesAfterEnv":["<rootDir>/jest/custom-matchers.js"],"transform":{"^.+\\.(t|j)sx?$":"@swc/jest"},"moduleNameMapper":{"^~/(.*)":"<rootDir>/$1"}},"peerDependencies":{"tailwindcss":">=3.2.0"},"devDependencies":{"@swc/cli":"^0.1.57","@swc/core":"^1.3.7","@swc/jest":"^0.2.36","@types/jest":"^29.5.12","jest":"^29.7.0","postcss":"^8.4.17","prettier":"^2.7.1","tailwindcss":"0.0.0-insiders.7385373","typescript":"^4.8.4"},"gitHead":"d08027ef07e7dfbd98bacb2edb89ed8dd2ed7e25","bugs":{"url":"https://github.com/butterfail/tailwindcss-inverted-radius/issues"},"homepage":"https://github.com/butterfail/tailwindcss-inverted-radius#readme","_id":"@butterfail/tailwindcss-inverted-radius@0.1.2","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-BCVx7nuSsWCMxHQ4gUih56bEcCP9V4OPAaXLqS+Wqh8Kl06ioHzkP/cgoMGDY3XuZbjwaHTeKMDE5d+t1cl/Eg==","shasum":"31c19ae8aa8dbe79a80eab82e3ab51d194f9899c","tarball":"https://registry.npmjs.org/@butterfail/tailwindcss-inverted-radius/-/tailwindcss-inverted-radius-0.1.2.tgz","fileCount":5,"unpackedSize":13574,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyetMNmoglsFPviidBAYcqf1bp7PHysODxdbUA5CgzNAiEA1jAL1c/ozuPQwS63sSwt8hKnZTnWs3V74XT5sKICYoQ="}]},"_npmUser":{"name":"butterfail","email":"bonjour@gregoireciles.fr"},"directories":{},"maintainers":[{"name":"butterfail","email":"bonjour@gregoireciles.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-inverted-radius_0.1.2_1718377843395_0.9041495971575051"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-30T19:18:36.940Z","modified":"2024-06-14T15:10:43.724Z","0.1.0":"2024-03-30T19:18:37.220Z","0.1.1":"2024-03-31T09:30:08.889Z","0.1.2":"2024-06-14T15:10:43.568Z"},"maintainers":[{"name":"butterfail","email":"bonjour@gregoireciles.fr"}],"repository":{"type":"git","url":"git+https://github.com/butterfail/tailwindcss-inverted-radius.git"},"license":"MIT","homepage":"https://github.com/butterfail/tailwindcss-inverted-radius#readme","bugs":{"url":"https://github.com/butterfail/tailwindcss-inverted-radius/issues"},"readme":"# @butterfail/tailwindcss-inverted-radius\n\nA plugin for Tailwind CSS v3.2+ that provides utilities to create inverted rounded corners for elements.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install @butterfail/tailwindcss-inverted-radius\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@butterfail/tailwindcss-inverted-radius'),\n    // ...\n  ],\n}\n```\n\n## Usage\n\nThe plugin provides utility classes to create inverted rounded corners for elements.\n\nIt generates classes for specifying the size of the rounded corners individually for each corner.\n\nCombine the `inv-rad` and `inv-rad-{n}` classes to specify the inverted radius for an element:\n\n```html\n<div class=\"inv-rad inv-rad-4\">\n  <!-- ... -->\n</div>\n```\n\nUse `inv-rad-0` to remove any inverted radius behavior:\n\n```html\n<div class=\"inv-rad inv-rad-4 lg:inv-rad-0\">\n  <!-- ... -->\n</div>\n```\n\nYou can select the specific corner sizes by adding `inv-rad-{corner-position}-{n}`.\n\nThe following position corner values:\n\n| Name           | Class              |\n| -------------- | ------------------ |\n| `top`          | `.inv-rad-t-{n}`   |\n| `right`        | `.inv-rad-r-{n}`   |\n| `bottom`       | `.inv-rad-b-{n}`   |\n| `left`         | `.inv-rad-l-{n}`   |\n| `top right`    | `.inv-rad-t-r-{n}` |\n| `top left`     | `.inv-rad-t-l-{n}` |\n| `bottom right` | `.inv-rad-b-r-{n}` |\n| `bottom left`  | `.inv-rad-b-l-{n}` |\n\n## Compatibility\n\nThe plugin utilizes CSS mask properties to create inverted rounded corners.\n\nWhile this approach is widely supported, it's always a good practice to test for compatibility with your target browsers.\n\n| CSS Property                                                   | Reference |\n| -------------------------------------------------------------- | --------- |\n| [\"mask-image\"](https://caniuse.com/?search=mask-image)         | CanIUse   |\n| [\"mask-position\"](https://caniuse.com/?search=mask-position)   | CanIUse   |\n| [\"mask-mode\"](https://caniuse.com/?search=mask-mode)           | CanIUse   |\n| [\"mask-origin\"](https://caniuse.com/?search=mask-origin)       | CanIUse   |\n| [\"mask-clip\"](https://caniuse.com/?search=mask-clip)           | CanIUse   |\n| [\"mask-composite\"](https://caniuse.com/?search=mask-composite) | CanIUse   |\n| [\"mask-repeat\"](https://caniuse.com/?search=mask-repeat)       | CanIUse   |\n| [\"mask-size\"](https://caniuse.com/?search=mask-size)           | CanIUse   |\n\n## Configuration\n\nBy default, we ship with the [tailwind's spacing](https://tailwindcss.com/docs/customizing-spacing) configuration.\n\nYou can configure which values are available for this plugin under the `invRad` key in your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      invRad: {\n        4.5: '1.125rem',\n      },\n    },\n  },\n}\n```\n\n## License\n\nThis plugin is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n","readmeFilename":"README.md"}