Add wrap-anywhere utility (#12128)

Related discussion #12127

```css
.wrap-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.

---------

Co-authored-by: Philipp Spiess <[email protected]>

Author: serkodev

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
+- _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
 
 ## [4.0.8] - 2025-02-21
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -8350,6 +8350,9 @@ exports[`getClassList 1`] = `
   "will-change-contents",
   "will-change-scroll",
   "will-change-transform",
+  "wrap-anywhere",
+  "wrap-break-word",
+  "wrap-normal",
   "z-0",
   "z-10",
   "z-20",

packages/tailwindcss/src/feature-flags.ts

@@ -1 +1,2 @@
 export const enableUserValid = process.env.FEATURES_ENV !== 'stable'
+export const enableWrapAnywhere = process.env.FEATURES_ENV !== 'stable'

packages/tailwindcss/src/utilities.test.ts

@@ -4213,9 +4213,8 @@ test('translate-y', async () => {
 })
 
 test('translate-z', async () => {
-  expect(
-    await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]']),
-  ).toMatchInlineSnapshot(`
+  expect(await run(['-translate-z-px', 'translate-z-px', '-translate-z-[var(--value)]']))
+    .toMatchInlineSnapshot(`
     ".-translate-z-\\[var\\(--value\\)\\] {
       --tw-translate-z: calc(var(--value) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
@@ -8800,7 +8799,7 @@ test('text-wrap', async () => {
   ).toEqual('')
 })
 
-test('overflow-wrap', async () => {
+test('word-break', async () => {
   expect(await run(['break-normal', 'break-words', 'break-all', 'break-keep']))
     .toMatchInlineSnapshot(`
       ".break-normal {
@@ -8834,6 +8833,32 @@ test('overflow-wrap', async () => {
   ).toEqual('')
 })
 
+test('overflow-wrap', async () => {
+  expect(await run(['wrap-anywhere', 'wrap-break-word', 'wrap-normal'])).toMatchInlineSnapshot(`
+    ".wrap-anywhere {
+      overflow-wrap: anywhere;
+    }
+
+    .wrap-break-word {
+      overflow-wrap: break-word;
+    }
+
+    .wrap-normal {
+      overflow-wrap: normal;
+    }"
+  `)
+  expect(
+    await run([
+      '-wrap-anywhere',
+      '-wrap-break-word',
+      '-wrap-normal',
+      'wrap-anywhere/foo',
+      'wrap-break-word/foo',
+      'wrap-normal/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('rounded', async () => {
   expect(
     await compileCss(

packages/tailwindcss/src/utilities.ts

@@ -11,6 +11,7 @@ import {
 } from './ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate'
 import type { DesignSystem } from './design-system'
+import { enableWrapAnywhere } from './feature-flags'
 import type { Theme, ThemeKey } from './theme'
 import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
@@ -2029,6 +2030,12 @@ export function createUtilities(theme: Theme) {
   staticUtility('break-all', [['word-break', 'break-all']])
   staticUtility('break-keep', [['word-break', 'keep-all']])
 
+  if (enableWrapAnywhere) {
+    staticUtility('wrap-anywhere', [['overflow-wrap', 'anywhere']])
+    staticUtility('wrap-break-word', [['overflow-wrap', 'break-word']])
+    staticUtility('wrap-normal', [['overflow-wrap', 'normal']])
+  }
+
   {
     // border-radius
     for (let [root, properties] of [