This plugin provides clip-path utilities for TailwindCSS v4.0+.

Installation

Install this plugin in your project:

# via npm
npm add -D tailwindcss-clip-path

# or pnpm
pnpm add -D tailwindcss-clip-path

# or yarn etc

Import the plugin:

/* index.css */
@import "tailwindcss";
/* other imports */
@import "tailwindcss-clip-path";

Utilities

The utilities provided by this plugin are of the form cp-*.

Keyword

| Class | Property | | --------- | ------------------- | | cp-none | clip-path: none |

Global

| 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 |

Clip Source

| Class | Property | Example | | ------------------ | ------------------ | -------------------------------------- | | cp-url-[url] | clip-path: url | cp-url-[url(/masks/example.svg)] |

Refer to Clip Source for property details.

Geometry Box

| 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.

Basic Shape

| 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 be cp-inset-[25%_10%] instead.