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',
      },
    });
  }),
],

[sadeghi-aa]

Hi. Is there any update on this PR? I need the word-break: break-word; functionality. I did some research and found out that I can also use word-break: normal; in combination with overflow: anywhere; but the latter also doesn't exist in TailwindCSS. Does anyone have a solution for this issue?

[shrall]

Hi. Is there any update on this PR? I need the word-break: break-word; functionality. I did some research and found out that I can also use word-break: normal; in combination with overflow: anywhere; but the latter also doesn't exist in TailwindCSS. Does anyone have a solution for this issue?

adding in a custom class just like @silverwind 's comment should work for now

[brandonmcconnell]

@sadeghi-aa You could also use an arbitrary utility in the meantime, like [word-break:break-word]

[404missinglink]

Any update on merging this with base tailwind? Just went down such a huge rabbit hole since I didn't know break-word was deprecated and my iPhone users were complaining.

[sepehr-safari]

ship it!

[danielraab]

Why this pull request is into tailwindlabs:archive/master-2024-02-23 ?

[serkodev]

@danielraab the old master branch renamed by the maintainers

[francislavoie]

I'd love to see this land for v4. This is the only usage of utilities we have in our project, so it would let us clean up at the same time as upgrading, instead of having to use the new @utilities in v4.

We're doing this as a workaround for now:

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