overflow-clip-margin css property

[stormynight9]

Any plans on adding overflow-clip-margin css property to TailwindCSS?

[catinrage]

why is this feature not implemented yet ? its just so simple.

[rozsazoltan]

https://caniuse.com/?search=overflow-clip-margin

[rozsazoltan]

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 Tailwind CSS 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.

@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;
}

• Tailwind Play