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.