tailwind-css

How can overflow-clip-margin be implemented as a utility?

Although the overflow-clip-margin CSS property - which controls overflow: clip; - is still only partially supported, I'm interested in how I can extend TailwindCSS with it, similarly to how Tailwind applies box-sizing by default.

Solution

  • Browsers don't fully support this feature yet. I assume that's the reason for the delayed adoption. However, if it's not important for you that the feature works perfectly across all browsers supported by TailwindCSS v4, you can easily add it to your project using the @utility directive.

    The visual box values for content, padding (default), and border have been supported for quite a while by most Chromium-based browsers (Chrome, Edge, Opera, ...), with the exception of Safari and Firefox. I've declared these separately.

    As for a relatively newer value-based margin definition, it's still very much in the experimental phase and not available by default in most browsers. Nevertheless, I’ve created a utility for that as well.

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

@utility clip-box-* {
  overflow-clip-margin: --value('inherit', 'initial', 'unset', [*]);
  overflow-clip-margin: calc(var(--spacing) * --value(integer));
}
@utility clip-box-content {
  overflow-clip-margin: content-box;
}
@utility clip-box-padding {
  overflow-clip-margin: padding-box;
}
@utility clip-box-border {
  overflow-clip-margin: border-box;
}
</style>

<div class="flex gap-4">
  <!-- without clip-box-* the default value will be padding-box -->
  <div class="overflow-clip w-50 h-32 bg-yellow-300 p-4 border-10 border-yellow-500">
    <div class="bg-yellow-100">
      <p class="font-semibold">without clip-box-*</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni optio tempore veritatis, maxime ipsum ullam laboriosam repellendus nihil sunt beatae libero officiis, nesciunt consequuntur nulla aut minima at, sint molestiae!</p>
    </div>
  </div>

  <!-- clip-box-content -->
  <div class="overflow-clip clip-box-content w-50 h-32 bg-sky-300 p-4 border-10 border-sky-500">
    <div class="bg-sky-100">
      <p class="font-semibold">clip-box-content</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni optio tempore veritatis, maxime ipsum ullam laboriosam repellendus nihil sunt beatae libero officiis, nesciunt consequuntur nulla aut minima at, sint molestiae!</p>
    </div>
  </div>

  <!-- clip-box-padding -->
  <div class="overflow-clip clip-box-padding w-50 h-32 bg-yellow-300 p-4 border-10 border-yellow-500">
    <div class="bg-yellow-100">
      <p class="font-semibold">clip-box-padding</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni optio tempore veritatis, maxime ipsum ullam laboriosam repellendus nihil sunt beatae libero officiis, nesciunt consequuntur nulla aut minima at, sint molestiae!</p>
    </div>
  </div>

  <!-- clip-box-border -->
  <div class="overflow-clip clip-box-border w-50 h-32 bg-green-300 p-4 border-10 border-green-500">
    <div class="bg-green-100">
      <p class="font-semibold">clip-box-border</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni optio tempore veritatis, maxime ipsum ullam laboriosam repellendus nihil sunt beatae libero officiis, nesciunt consequuntur nulla aut minima at, sint molestiae!</p>
    </div>
  </div>
</div>

    image