{"id":13480235,"url":"https://github.com/locksten/tailwindcss-padded-radius","last_synced_at":"2025-03-21T10:31:56.118Z","repository":{"id":40754579,"uuid":"285112055","full_name":"locksten/tailwindcss-padded-radius","owner":"locksten","description":"A Tailwind CSS plugin for matching border radii","archived":false,"fork":false,"pushed_at":"2023-01-06T13:20:46.000Z","size":886,"stargazers_count":25,"open_issues_count":13,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-01T05:31:47.822Z","etag":null,"topics":["border-radius","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/locksten.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-04T22:12:44.000Z","updated_at":"2024-12-16T12:34:47.000Z","dependencies_parsed_at":"2023-02-06T04:16:55.279Z","dependency_job_id":null,"html_url":"https://github.com/locksten/tailwindcss-padded-radius","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locksten%2Ftailwindcss-padded-radius","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locksten%2Ftailwindcss-padded-radius/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locksten%2Ftailwindcss-padded-radius/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locksten%2Ftailwindcss-padded-radius/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/locksten","download_url":"https://codeload.github.com/locksten/tailwindcss-padded-radius/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244134501,"owners_count":20403640,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["border-radius","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-31T17:00:36.130Z","updated_at":"2025-03-21T10:31:55.768Z","avatar_url":"https://github.com/locksten.png","language":"JavaScript","readme":"# Tailwind CSS Pulgin for Matching Border Radii\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./image.png\" width=\"525\" height=\"350\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm install tailwindcss-padded-radius\n```\n\n## Setup\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      paddedRadius: {\n        /* The number of spacings to generate */\n        // numberOfSpacings: 64,\n\n        /* The spacing that the other spacings are multiples of */\n        // baseSpacing: \"0.25rem\",\n\n        /* A spacigns object to use in place of numberOfSpacings and baseSpacing */\n        // spacings: { '1': '0.25rem', '2': '0.5rem', '3': '0.75rem' }\n\n        /* Whether negative versions should be generated */\n        // generateNegative: false,\n      },\n    },\n  },\n  plugins: [require(\"tailwindcss-padded-radius\")],\n  variants: {\n    borderRadius: [\"responsive\", \"paddedRadius\"],\n  },\n};\n```\n\n## Usage\n\nFor nested border radii to match,\nthe outer radius must be equal to\nthe inner radius plus the distance between them.\nThis plugin adds variants to borderRadius utilties\nthat let you easily tweak border radii\nusing the same scale that is used for padding and margin.\nSo if the inner div has `rounded-md` and `m-2` and the outer div has `p-3`,\nthe outer radius should be `rounded-md-5`.\n\n```html\n\u003cdiv class=\"rounded-md-5 p-3  bg-gray-700\"\u003e\n  \u003cdiv class=\"rounded-md m-2  w-32 h-32 bg-gray-200\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocksten%2Ftailwindcss-padded-radius","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flocksten%2Ftailwindcss-padded-radius","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocksten%2Ftailwindcss-padded-radius/lists"}