How to add a clip path to image in tailwind

user_8569903 0
Viewed 6418

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

tailwind-css next.js reactjs
2 Answers

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 custome class into your JSX inside className="clip-your-needful-style"

Hop it will work in your case...

user_178743290

Here's my idea on implementing clip-path into Tailwind CSS, which covers the slant-down designed sections you want.

To skew element by 3 degrees (approx.) you could apply CSS like: clip-path: polygon(0 0, 100% 2.25rem, 100% 100%, 0 calc(100% - 2.25rem))

In the Tailwind world, let's use utility classes instead:

<section class="bg-gray-300 h-72 clip polygon b-3 d-3">
  <div class="container"></div>
</section>

Then in the global Tailwind CSS file use the clip-path utility (polygon shape in this case) and its values (e.g. dimensions a-3, b-3, c-3, d-3 as below)

@layer utilities {
  * {   --tw-clip-polygon: var(--tw-clip-polygon-a), var(--tw-clip-polygon-b), var(--tw-clip-polygon-c), var(--tw-clip-polygon-d);
  --tw-clip-polygon-a: 0 0;
  --tw-clip-polygon-b: 100% 0;
  --tw-clip-polygon-c: 100% 100%;
  --tw-clip-polygon-d: 0 100%;
  }

  .clip.polygon.a-3 {
    --tw-clip-polygon-a: 0 2.25rem;
  }

  .clip.polygon.b-3 {
    --tw-clip-polygon-b: 100% 2.25rem;
  }

  .clip.polygon.c-3 {
    --tw-clip-polygon-c: 100% calc(100% - 2.25rem);
  }

  .clip.polygon.d-3 {
    --tw-clip-polygon-d: 0 calc(100% - 2.25rem);
  }

  .clip.polygon {
    clip-path: polygon(var(--tw-clip-polygon));
  }
}

There's already plugin for precise dimensions, that you could use instead.

It would be amazing, though, if someone can rethink my idea with other shapes like ellipses, and circles... along with the dimensions for the most used use cases.

user_89597230
Related