Add `break-anywhere` utility

[serkodev]

Related discussion #12127

.break-anywhere {
  overflow-wrap: anywhere;
}

Updated 2024-11-30

The new changes remove the original @supports because I agree that developers should decide for themselves whether to maintain backward compatibility. Also updated in line with the new changes in the next branch.

[brandonmcconnell]

@serkodev This looks great. Are there any side effects you know of for browsers that do not yet support either of these, or would this work purely, as a progressive enhancement?

[serkodev]

@brandonmcconnell For browsers that do not support overflow-wrap: anywhere, it's likely that they will support the older property word-break: break-word given its longevity in the web standards.

Moreover, the @supports (not) query boasts a substantial 97.77% browser coverage. This suggests that the approach should function effectively in the vast majority of browsing environments. So it should serve as a progressive enhancement, ensuring a seamless experience for users across different browsers.

[jonathanlal]

this is much needed

[silverwind]

Imho it shouldn't use @supports for the sake of keeping it lightweight and because @supports is known to have obscure bugs. Users should be aware of the browsers they support and if the prop is not supported, I would see it as graceful degradation.

[yuheiy]

There are subtle differences between the behavior of word-break: break-word and overflow-wrap: anywhere, so they should not be included in the same utility class. If the users want to progressively enhance, it should be the user’s responsibility.

Tailwind states the following regarding browser support:

Tailwind CSS v3.0 is primarily designed and tested with the latest stable versions of Chrome, Firefox, Edge, and Safari, and does not support any version of Internet Explorer, including IE 11.

While the majority of Tailwind CSS features are compatible with all modern browsers, the framework also incorporates APIs for several advanced features not yet universally supported, such as the :focus-visible pseudo-class and backdrop-filter utilities.

Given that Tailwind is a foundational framework, users can easily avoid using unsupported features by simply not utilizing the corresponding utility or modifier, similar to how one would refrain from using specific CSS features in their own stylesheets.

https://tailwindcss.com/docs/browser-support

For example, the support rate for text wrap utilities is lower, but this is not a problem. Whether or not to use those properties should be left to the user’s discretion.

[silverwind]

There are subtle differences between the behavior of word-break: break-word and overflow-wrap: anywhere, so they should not be included in the same utility class. If the users want to progressively enhance, it should be the user’s responsibility.

I agree and think this should just be .break-anywhere { overflow-wrap: anywhere }, let the user deal with the subtle differences and browser support instead of trying to be smart.

[liesahead]

Still very much needed.. It wouldn't be a problem if it was possible to redefine word break classes through tailwind config.

[silverwind]

Meanwhile, you can define a plugin in your config to add this. Here in the simplest variant:

import plugin from 'tailwindcss/plugin.js';

plugins: [
  plugin(({addUtilities}) => {
    addUtilities({
      '.break-anywhere': {
        'overflow-wrap': 'anywhere',
      },
    });
  }),
],