plugin for tailwindcss clip-path utilities
npm install tailwind-clip-pathclip-path properties with Tailwind CSS described on developer.mozilla.org
bash
Install using npm
npm install --save-dev tailwind-clip-path
`
$3
`js
// tailwind.config.js
{
plugins: [
require('tailwind-clip-path'),
],
}
`
clip-path
The clip-path class
| Class | Properties |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
| clip-path-none | clip-path:none |
| clip-path-margin | clip-path:margin-box |
| clip-path-padding | clip-path:padding-box |
| clip-path-content | clip-path:content-box |
| clip-path-fill | clip-path:fill-box |
| clip-path-stroke | clip-path:stroke-box |
| clip-path-view | clip-path:view-box |
| clip-path-inset | clip-path:inset(100px 50px) |
| clip-path-circle | clip-path:circle(50px at 0 100px) |
| clip-path-ellipse | clip-path:ellipse(50px 60px at 0 10% 20%) |
| clip-path-polygon | clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) |
| 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') |
| clip-path-inherit | clip-path:inherit |
| clip-path-initial | clip-path:initial |
| clip-path-revert | clip-path:revert |
| clip-path-revert-layer | clip-path:revert-layer |
| clip-path-unset | clip-path:unset |
$3
You let conditionally apply utility classes in different states using variant modifiers.
`html
`
$3
You can also use variant modifiers to target media queries
`html
`
$3
You change, add, or remove utilities by editing the theme.clipPath section of your Tailwind config.
`js
// tailwind.config.js
{
theme: {
clipPath: {
mypolygon: "polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem))",
},
plugins: [
require('tailwind-clip-path'),
],
}
`
And use:
`html
`
$3
If 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.
This plugin provide arbitrary values for this clases
| Class | values |
| ----------------- | ------------------------------------------------------------------------------ |
| clip-path |
| clip-path-inset | Defines an inset rectangle. |
| clip-path-circle | Defines a circle using a radius and a position. |
| clip-path-ellipse | Defines an ellipse using two radii and a position. |
| clip-path-polygon | Defines a polygon using an SVG filling rule and a set of vertices. |
| clip-path-url | Defines a shape using an optional SVG filling rule and an SVG path definition. |
`html
class="h-20 clip-path-polygon-[0_0,_100%_0,_100%_100%,_0_calc(100%_-_1rem)]"
>