Tailwindcss Clip Path
Clip-Path Plugin for TailwindCSS
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 becp-inset-[25%_10%]instead.
