How to add a clip path to image in tailwind

Question

I am looking to make a clip path to do dividers on my website. I want to clip out my solid white background and allow the image in the section below to go up into it.

I have seen css examples, but I am using Tailwinds and Next.jS

I cant seem to find any help on this.

normally in CSS you can do this.

header {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - 6vw)
  );
}

but using tailwind and React, I dont see how to do this.

I am trying to get an effect like this.

This is what Im trying to achieve with React/NExt.js and tailwind

Answer 1

in React, go to your index.css file, where @tailwind directives are present & at there create your own custom utility class under utilities directive, as like -

@layer utilities {

   .clip-your-needful-style {

       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));

   }

}

then you can call your custom class into your JSX inside className="clip-your-needful-style"

Hope it will work in your case... 🧐