@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?

@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.

this is much needed

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.

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.

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.

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

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

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?

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

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

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.

ship it!

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

@danielraab the old master branch renamed by the maintainers

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

Hey folks! We're not going to add anything new to v3 now that v4 is out so going to close this one, but definitely open to tackling this in v4 if someone wants to open a new PR at some point. Sorry for the lack of discussion here, hard to make time to think through these small additions sometimes when there are other bigger things going on.

Ignore me, didn't realize this had been updated for v4 🙈 will try to make time to make a decision about the exact API here soon!

Hey! Our plan is to land this into main behind a feature flag and will be releasing it with 4.1.

We decided to not add to the word-* namespace anymore since that felt really confusing and inconsistent. Instead, we're adding three new utilities: wrap-anywhere, wrap-break-word, and wrap-normal. Once this releases, we will change the word-break docs to no longer document break-words (it will still be available for compatibility of course) in favor of the new wrap-break-word utility. We'll also add a new page with examples for the overflow-wrap docs.