{"id":16727715,"url":"https://github.com/mellambias/tailwind-clip-path","last_synced_at":"2025-05-12T04:30:29.615Z","repository":{"id":57689516,"uuid":"483143509","full_name":"mellambias/tailwind-clip-path","owner":"mellambias","description":"Plugin for Tailwindcss and css clip-path","archived":false,"fork":false,"pushed_at":"2023-01-27T11:06:05.000Z","size":22,"stargazers_count":70,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T23:51:37.455Z","etag":null,"topics":["clip-path","css","plugin","tailwindcss","utilities"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mellambias.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-19T07:35:05.000Z","updated_at":"2025-02-20T22:59:37.000Z","dependencies_parsed_at":"2023-02-15T08:20:33.417Z","dependency_job_id":null,"html_url":"https://github.com/mellambias/tailwind-clip-path","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mellambias%2Ftailwind-clip-path","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mellambias%2Ftailwind-clip-path/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mellambias%2Ftailwind-clip-path/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mellambias%2Ftailwind-clip-path/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mellambias","download_url":"https://codeload.github.com/mellambias/tailwind-clip-path/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253675041,"owners_count":21945886,"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":["clip-path","css","plugin","tailwindcss","utilities"],"created_at":"2024-10-12T23:06:48.085Z","updated_at":"2025-05-12T04:30:29.279Z","avatar_url":"https://github.com/mellambias.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind CSS Clip-Path\n\nThe **clip-path CSS property** creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.\n\nThis plugin adds utilities to use `clip-path` properties with Tailwind CSS described on [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)\n\n## Installation\n\nAdd this plugin to your project:\n\n```bash\n# Install using npm\nnpm install --save-dev tailwind-clip-path\n```\n\n### Add the plugin to file config\n\n```js\n// tailwind.config.js\n{\n  plugins: [\n    require('tailwind-clip-path'),\n  ],\n}\n```\n\n## clip-path\n\nThe **clip-path** class\n\n| Class                  | Properties                                                                                                       |\n| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| clip-path-none         | clip-path:none                                                                                                   |\n| clip-path-margin       | clip-path:margin-box                                                                                             |\n| clip-path-padding      | clip-path:padding-box                                                                                            |\n| clip-path-content      | clip-path:content-box                                                                                            |\n| clip-path-fill         | clip-path:fill-box                                                                                               |\n| clip-path-stroke       | clip-path:stroke-box                                                                                             |\n| clip-path-view         | clip-path:view-box                                                                                               |\n| clip-path-inset        | clip-path:inset(100px 50px)                                                                                      |\n| clip-path-circle       | clip-path:circle(50px at 0 100px)                                                                                |\n| clip-path-ellipse      | clip-path:ellipse(50px 60px at 0 10% 20%)                                                                        |\n| clip-path-polygon      | clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)                                                            |\n| clip-path              | clip-path:path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z') |\n| clip-path-inherit      | clip-path:inherit                                                                                                |\n| clip-path-initial      | clip-path:initial                                                                                                |\n| clip-path-revert       | clip-path:revert                                                                                                 |\n| clip-path-revert-layer | clip-path:revert-layer                                                                                           |\n| clip-path-unset        | clip-path:unset                                                                                                  |\n\n### Applying conditionally\n\nYou let conditionally apply utility classes in different states using [variant modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states).\n\n```html\n\u003cdiv class=\"hover:clip-path-ellipse\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n### Breakpoints and media queries\n\nYou can also use variant modifiers to target [media queries](https://tailwindcss.com/docs/hover-focus-and-other-states#media-queries)\n\n```html\n\u003cdiv class=\"md:clip-path-revert\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\n### Customizing your theme\n\nYou change, add, or remove utilities by editing the **theme.clipPath** section of your Tailwind config.\n\n```js\n// tailwind.config.js\n{\n  theme: {\n    clipPath: {\n        mypolygon: \"polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem))\",\n    },\n  plugins: [\n    require('tailwind-clip-path'),\n  ],\n}\n```\n\nAnd use:\n\n```html\n\u003cimg src=\"\" class=\"clip-path-mypolygon\" /\u003e\n```\n\n### Arbitrary values\n\nIf you need to use a value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any [arbitrary value](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values).\n\nThis plugin provide arbitrary values for this clases\n\n| Class             | values                                                                         |\n| ----------------- | ------------------------------------------------------------------------------ |\n| clip-path         |\n| clip-path-inset   | Defines an inset rectangle.                                                    |\n| clip-path-circle  | Defines a circle using a radius and a position.                                |\n| clip-path-ellipse | Defines an ellipse using two radii and a position.                             |\n| clip-path-polygon | Defines a polygon using an SVG filling rule and a set of vertices.             |\n| clip-path-url     | Defines a shape using an optional SVG filling rule and an SVG path definition. |\n\n```html\n\u003cdiv\n  class=\"h-20 clip-path-polygon-[0_0,_100%_0,_100%_100%,_0_calc(100%_-_1rem)]\"\n\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmellambias%2Ftailwind-clip-path","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmellambias%2Ftailwind-clip-path","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmellambias%2Ftailwind-clip-path/lists"}