Add utility for 'overflow-anchor: none'

[kripod]

Sometimes, scroll anchoring can be destructive (e.g. on contenteditable HTML elements with a padding). I would like to propose adding a no-overflow-anchoring utility for setting overflow-anchor: none easily.

[RobinSCU]

I also need this for our webshop

[kripod]

@RobinSCU In the meantime, you may use a tailwind.config.js file like below:

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        ".no-overflow-anchoring": {
          overflowAnchor: "none",
        },
      });
    }),
  ],
};

[RobinSCU]

@kripod Thanks!

[zanona]

Also as an arbitrary property, for example:

<div className="bg-red-500 md:[overflow-anchor:none]">
...
</div>

[JoaoPedroMDP]

Thank you my savior

[Zerebokep]

any chance to get this added?

[programming-with-ia]

+1

[orimay]

+1

[switz]

Would be very nice!

[SlothLady]

+1

[rozsazoltan]

From v4 onwards, this can easily be done using the @utility directive:

@utility no-overflow-anchoring {
  overflow-anchor: none;
}

For v3 just follow #2301 (comment).

Or can use arbitrary value:

<div class="[overflow-anchor:none]">...</div>
<div class="lg:[overflow-anchor:none]">...</div>

[SlothLady]

Thank you!