diff --git a/CHANGELOG.md b/CHANGELOG.md index 96bcc4866af0..675df7dd31ec 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 18384759c727..2f55ec4159be 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/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", diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index 2cdf403e3abb..7a407b534f65 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/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' diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 5c17d048082a..12ded9596138 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/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( diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index c969bfa9578a..a5a31a006780 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/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 [