This plugin provides clip-path utilities for TailwindCSS v4.0+.
Install this plugin in your project:
# via npm npm add -D tailwindcss-clip-path # or pnpm pnpm add -D tailwindcss-clip-path # or yarn etcImport the plugin:
/* index.css */ @import "tailwindcss"; /* other imports */ @import "tailwindcss-clip-path";The utilities provided by this plugin are of the form cp-*.
| Class | Property |
|---|---|
| cp-none | clip-path: none |
| Class | Property |
|---|---|
| cp-initial | clip-path: initial |
| cp-inherit | clip-path: inherit |
| cp-unset | clip-path: unset |
| cp-revert | clip-path: revert |
| cp-revert-layer | clip-path: revert-layer |
| Class | Property | Example |
|---|---|---|
| cp-url-[url] | clip-path: url | cp-url-[url(/masks/example.svg)] |
Refer to Clip Source for property details.
| Class | Property |
|---|---|
| cp-margin | clip-path: margin-box |
| cp-border | clip-path: border-box |
| cp-padding | clip-path: padding-box |
| cp-content | clip-path: content-box |
| cp-fill | clip-path: fill-box |
| cp-stroke | clip-path: stroke-box |
| cp-view | clip-path: view-box |
Refer to Geometry Box for property details.
| Class | Property | Example |
|---|---|---|
| cp-inset-[value] | clip-path: inset( value ) | cp-inset-[100px_50px] |
| cp-circle-[value] | clip-path: circle( value ) | cp-circle-[50px_at_0_100px] |
| cp-ellipse-[value] | clip-path: ellipse( value ) | cp-ellipse-[50px_60px_at_10%_20%] |
| cp-polygon-[value] | clip-path: polygon( value ) | cp-polygon-[10%_0,_80%_20%,_50%_0,_0_50%] |
| cp-path-[value] | clip-path: path( value ) | cp-path-["M.5_1C.5_1_0_.70.3A.25.25*0_11.5.3Z"] |
| cp-rect-[value] | clip-path: rect( value ) | cp-rect-[5px_5px_160px_145px_round_20%] |
| cp-shape-[value] | clip-path: shape( value ) | cp-shape-[nonzero_from_0_0,_line_to_10px_10px] |
| cp-xywh-[value] | clip-path: xywh( value ) | cp-xywh-[0_5px_100%_75%_round_15%_0] |
Refer to Basic Shape for property details.
Note that spaces are not allowed in
[]and must be replaced with_.
e.g.cp-inset-[25% 10%]should becp-inset-[25%_10%]instead.