diff --git a/CHANGELOG.md b/CHANGELOG.md index 067c06bf59a1..4bc213414022 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595)) - Support `keyframes` in JS config file themes ([#14594](https://github.com/tailwindlabs/tailwindcss/pull/14594)) +- Add safe alignment utilities ([#14607](https://github.com/tailwindlabs/tailwindcss/pull/14607)) - _Upgrade (experimental)_: The upgrade tool now automatically discovers your JavaScript config ([#14597](https://github.com/tailwindlabs/tailwindcss/pull/14597)) ### Fixed diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 75232242cd0d..6cc15c54f690 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -1682,7 +1682,9 @@ exports[`getClassList 1`] = ` "content-baseline", "content-between", "content-center", + "content-center-safe", "content-end", + "content-end-safe", "content-evenly", "content-none", "content-normal", @@ -2375,24 +2377,32 @@ exports[`getClassList 1`] = ` "italic", "items-baseline", "items-center", + "items-center-safe", "items-end", + "items-end-safe", "items-start", "items-stretch", "justify-around", "justify-baseline", "justify-between", "justify-center", + "justify-center-safe", "justify-end", + "justify-end-safe", "justify-evenly", "justify-items-center", + "justify-items-center-safe", "justify-items-end", + "justify-items-end-safe", "justify-items-normal", "justify-items-start", "justify-items-stretch", "justify-normal", "justify-self-auto", "justify-self-center", + "justify-self-center-safe", "justify-self-end", + "justify-self-end-safe", "justify-self-start", "justify-self-stretch", "justify-start", @@ -2756,18 +2766,24 @@ exports[`getClassList 1`] = ` "place-content-baseline", "place-content-between", "place-content-center", + "place-content-center-safe", "place-content-end", + "place-content-end-safe", "place-content-evenly", "place-content-start", "place-content-stretch", "place-items-baseline", "place-items-center", + "place-items-center-safe", "place-items-end", + "place-items-end-safe", "place-items-start", "place-items-stretch", "place-self-auto", "place-self-center", + "place-self-center-safe", "place-self-end", + "place-self-end-safe", "place-self-start", "place-self-stretch", "placeholder-current", @@ -3261,7 +3277,9 @@ exports[`getClassList 1`] = ` "self-auto", "self-baseline", "self-center", + "self-center-safe", "self-end", + "self-end-safe", "self-start", "self-stretch", "sepia", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 2e59def0197c..fd03bfd2cfa5 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -6514,8 +6514,10 @@ test('place-content', async () => { expect( await run([ 'place-content-center', + 'place-content-center-safe', 'place-content-start', 'place-content-end', + 'place-content-end-safe', 'place-content-between', 'place-content-around', 'place-content-evenly', @@ -6539,10 +6541,18 @@ test('place-content', async () => { place-content: center; } + .place-content-center-safe { + place-content: safe center; + } + .place-content-end { place-content: end; } + .place-content-end-safe { + place-content: safe end; + } + .place-content-evenly { place-content: evenly; } @@ -6583,7 +6593,9 @@ test('place-items', async () => { await run([ 'place-items-start', 'place-items-end', + 'place-items-end-safe', 'place-items-center', + 'place-items-center-safe', 'place-items-baseline', 'place-items-stretch', ]), @@ -6596,10 +6608,18 @@ test('place-items', async () => { place-items: center; } + .place-items-center-safe { + place-items: safe center; + } + .place-items-end { place-items: end; } + .place-items-end-safe { + place-items: safe end; + } + .place-items-start { place-items: start; } @@ -6630,8 +6650,10 @@ test('align-content', async () => { await run([ 'content-normal', 'content-center', + 'content-center-safe', 'content-start', 'content-end', + 'content-end-safe', 'content-between', 'content-around', 'content-evenly', @@ -6655,10 +6677,18 @@ test('align-content', async () => { align-content: center; } + .content-center-safe { + align-content: safe center; + } + .content-end { align-content: flex-end; } + .content-end-safe { + align-content: safe flex-end; + } + .content-evenly { align-content: space-evenly; } @@ -6701,8 +6731,17 @@ test('align-content', async () => { }) test('items', async () => { - expect(await run(['items-start', 'items-end', 'items-center', 'items-baseline', 'items-stretch'])) - .toMatchInlineSnapshot(` + expect( + await run([ + 'items-start', + 'items-end', + 'items-end-safe', + 'items-center', + 'items-center-safe', + 'items-baseline', + 'items-stretch', + ]), + ).toMatchInlineSnapshot(` ".items-baseline { align-items: baseline; } @@ -6711,10 +6750,18 @@ test('items', async () => { align-items: center; } + .items-center-safe { + align-items: safe center; + } + .items-end { align-items: flex-end; } + .items-end-safe { + align-items: safe flex-end; + } + .items-start { align-items: flex-start; } @@ -6746,7 +6793,9 @@ test('justify', async () => { 'justify-normal', 'justify-start', 'justify-end', + 'justify-end-safe', 'justify-center', + 'justify-center-safe', 'justify-between', 'justify-around', 'justify-evenly', @@ -6765,10 +6814,18 @@ test('justify', async () => { justify-content: center; } + .justify-center-safe { + justify-content: safe center; + } + .justify-end { justify-content: flex-end; } + .justify-end-safe { + justify-content: safe flex-end; + } + .justify-evenly { justify-content: space-evenly; } @@ -6813,7 +6870,9 @@ test('justify-items', async () => { await run([ 'justify-items-start', 'justify-items-end', + 'justify-items-end-safe', 'justify-items-center', + 'justify-items-center-safe', 'justify-items-stretch', ]), ).toMatchInlineSnapshot(` @@ -6821,10 +6880,18 @@ test('justify-items', async () => { justify-items: center; } + .justify-items-center-safe { + justify-items: safe center; + } + .justify-items-end { justify-items: end; } + .justify-items-end-safe { + justify-items: safe end; + } + .justify-items-start { justify-items: start; } @@ -7728,7 +7795,9 @@ test('place-self', async () => { 'place-self-auto', 'place-self-start', 'place-self-end', + 'place-self-end-safe', 'place-self-center', + 'place-self-center-safe', 'place-self-stretch', ]), ).toMatchInlineSnapshot(` @@ -7740,10 +7809,18 @@ test('place-self', async () => { place-self: center; } + .place-self-center-safe { + place-self: safe center; + } + .place-self-end { place-self: end; } + .place-self-end-safe { + place-self: safe end; + } + .place-self-start { place-self: start; } @@ -7775,7 +7852,9 @@ test('self', async () => { 'self-auto', 'self-start', 'self-end', + 'self-end-safe', 'self-center', + 'self-center-safe', 'self-stretch', 'self-baseline', ]), @@ -7792,10 +7871,18 @@ test('self', async () => { align-self: center; } + .self-center-safe { + align-self: safe center; + } + .self-end { align-self: flex-end; } + .self-end-safe { + align-self: safe flex-end; + } + .self-start { align-self: flex-start; } @@ -7829,7 +7916,9 @@ test('justify-self', async () => { 'justify-self-auto', 'justify-self-start', 'justify-self-end', + 'justify-self-end-safe', 'justify-self-center', + 'justify-self-center-safe', 'justify-self-stretch', 'justify-self-baseline', ]), @@ -7842,10 +7931,18 @@ test('justify-self', async () => { justify-self: center; } + .justify-self-center-safe { + justify-self: safe center; + } + .justify-self-end { justify-self: flex-end; } + .justify-self-end-safe { + justify-self: safe flex-end; + } + .justify-self-start { justify-self: flex-start; } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index a308b49c3613..3637594d65d7 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1976,8 +1976,10 @@ export function createUtilities(theme: Theme) { staticUtility('flex-wrap-reverse', [['flex-wrap', 'wrap-reverse']]) staticUtility('place-content-center', [['place-content', 'center']]) + staticUtility('place-content-center-safe', [['place-content', 'safe center']]) staticUtility('place-content-start', [['place-content', 'start']]) staticUtility('place-content-end', [['place-content', 'end']]) + staticUtility('place-content-end-safe', [['place-content', 'safe end']]) staticUtility('place-content-between', [['place-content', 'between']]) staticUtility('place-content-around', [['place-content', 'around']]) staticUtility('place-content-evenly', [['place-content', 'evenly']]) @@ -1985,15 +1987,19 @@ export function createUtilities(theme: Theme) { staticUtility('place-content-stretch', [['place-content', 'stretch']]) staticUtility('place-items-center', [['place-items', 'center']]) + staticUtility('place-items-center-safe', [['place-items', 'safe center']]) staticUtility('place-items-start', [['place-items', 'start']]) staticUtility('place-items-end', [['place-items', 'end']]) + staticUtility('place-items-end-safe', [['place-items', 'safe end']]) staticUtility('place-items-baseline', [['place-items', 'baseline']]) staticUtility('place-items-stretch', [['place-items', 'stretch']]) staticUtility('content-normal', [['align-content', 'normal']]) staticUtility('content-center', [['align-content', 'center']]) + staticUtility('content-center-safe', [['align-content', 'safe center']]) staticUtility('content-start', [['align-content', 'flex-start']]) staticUtility('content-end', [['align-content', 'flex-end']]) + staticUtility('content-end-safe', [['align-content', 'safe flex-end']]) staticUtility('content-between', [['align-content', 'space-between']]) staticUtility('content-around', [['align-content', 'space-around']]) staticUtility('content-evenly', [['align-content', 'space-evenly']]) @@ -2001,15 +2007,19 @@ export function createUtilities(theme: Theme) { staticUtility('content-stretch', [['align-content', 'stretch']]) staticUtility('items-center', [['align-items', 'center']]) + staticUtility('items-center-safe', [['align-items', 'safe center']]) staticUtility('items-start', [['align-items', 'flex-start']]) staticUtility('items-end', [['align-items', 'flex-end']]) + staticUtility('items-end-safe', [['align-items', 'safe flex-end']]) staticUtility('items-baseline', [['align-items', 'baseline']]) staticUtility('items-stretch', [['align-items', 'stretch']]) staticUtility('justify-normal', [['justify-content', 'normal']]) staticUtility('justify-center', [['justify-content', 'center']]) + staticUtility('justify-center-safe', [['justify-content', 'safe center']]) staticUtility('justify-start', [['justify-content', 'flex-start']]) staticUtility('justify-end', [['justify-content', 'flex-end']]) + staticUtility('justify-end-safe', [['justify-content', 'safe flex-end']]) staticUtility('justify-between', [['justify-content', 'space-between']]) staticUtility('justify-around', [['justify-content', 'space-around']]) staticUtility('justify-evenly', [['justify-content', 'space-evenly']]) @@ -2018,8 +2028,10 @@ export function createUtilities(theme: Theme) { staticUtility('justify-items-normal', [['justify-items', 'normal']]) staticUtility('justify-items-center', [['justify-items', 'center']]) + staticUtility('justify-items-center-safe', [['justify-items', 'safe center']]) staticUtility('justify-items-start', [['justify-items', 'start']]) staticUtility('justify-items-end', [['justify-items', 'end']]) + staticUtility('justify-items-end-safe', [['justify-items', 'safe end']]) staticUtility('justify-items-stretch', [['justify-items', 'stretch']]) functionalUtility('gap', { @@ -2107,20 +2119,26 @@ export function createUtilities(theme: Theme) { staticUtility('place-self-auto', [['place-self', 'auto']]) staticUtility('place-self-start', [['place-self', 'start']]) staticUtility('place-self-end', [['place-self', 'end']]) + staticUtility('place-self-end-safe', [['place-self', 'safe end']]) staticUtility('place-self-center', [['place-self', 'center']]) + staticUtility('place-self-center-safe', [['place-self', 'safe center']]) staticUtility('place-self-stretch', [['place-self', 'stretch']]) staticUtility('self-auto', [['align-self', 'auto']]) staticUtility('self-start', [['align-self', 'flex-start']]) staticUtility('self-end', [['align-self', 'flex-end']]) + staticUtility('self-end-safe', [['align-self', 'safe flex-end']]) staticUtility('self-center', [['align-self', 'center']]) + staticUtility('self-center-safe', [['align-self', 'safe center']]) staticUtility('self-stretch', [['align-self', 'stretch']]) staticUtility('self-baseline', [['align-self', 'baseline']]) staticUtility('justify-self-auto', [['justify-self', 'auto']]) staticUtility('justify-self-start', [['justify-self', 'flex-start']]) staticUtility('justify-self-end', [['justify-self', 'flex-end']]) + staticUtility('justify-self-end-safe', [['justify-self', 'safe flex-end']]) staticUtility('justify-self-center', [['justify-self', 'center']]) + staticUtility('justify-self-center-safe', [['justify-self', 'safe center']]) staticUtility('justify-self-stretch', [['justify-self', 'stretch']]) for (let value of ['auto', 'hidden', 'clip', 'visible', 'scroll']) {