Add safe alignment utilities

Author: benface

Diff for: CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `scripting`, `scripting-none`, and `scripting-initial` variants ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929))
 - _Experimental_: Add `pointer-none`, `pointer-coarse`, and `pointer-fine` variant ([#16946](https://github.com/tailwindlabs/tailwindcss/pull/16946))
 - _Experimental_: Add `any-pointer-none`, `any-pointer-coarse`, and `any-pointer-fine` variants ([#16941](https://github.com/tailwindlabs/tailwindcss/pull/16941))
+- _Experimental_: Add safe alignment utilities ([#14607](https://github.com/tailwindlabs/tailwindcss/pull/14607))
 - _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))
 - _Experimental_: Add `@source inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))

Diff for: packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -3746,7 +3746,9 @@ exports[`getClassList 1`] = `
   "content-baseline",
   "content-between",
   "content-center",
+  "content-center-safe",
   "content-end",
+  "content-end-safe",
   "content-evenly",
   "content-none",
   "content-normal",
@@ -4876,24 +4878,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",
@@ -6004,18 +6014,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",
@@ -7279,7 +7295,9 @@ exports[`getClassList 1`] = `
   "self-auto",
   "self-baseline",
   "self-center",
+  "self-center-safe",
   "self-end",
+  "self-end-safe",
   "self-start",
   "self-stretch",
   "sepia",

Diff for: packages/tailwindcss/src/feature-flags.ts

@@ -1,6 +1,7 @@
 export const enableDetailsContent = process.env.FEATURES_ENV !== 'stable'
 export const enableInvertedColors = process.env.FEATURES_ENV !== 'stable'
 export const enablePointerVariants = process.env.FEATURES_ENV !== 'stable'
+export const enableSafeAlignment = process.env.FEATURES_ENV !== 'stable'
 export const enableScripting = process.env.FEATURES_ENV !== 'stable'
 export const enableSourceInline = process.env.FEATURES_ENV !== 'stable'
 export const enableUserValid = process.env.FEATURES_ENV !== 'stable'

Diff for: packages/tailwindcss/src/utilities.test.ts

@@ -7125,8 +7125,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',
@@ -7150,10 +7152,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: space-evenly;
     }
@@ -7194,7 +7204,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',
     ]),
@@ -7207,10 +7219,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;
     }
@@ -7241,8 +7261,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',
@@ -7266,10 +7288,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;
     }
@@ -7312,8 +7342,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;
     }
@@ -7322,10 +7361,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;
     }
@@ -7357,7 +7404,9 @@ test('justify', async () => {
       'justify-normal',
       'justify-start',
       'justify-end',
+      'justify-end-safe',
       'justify-center',
+      'justify-center-safe',
       'justify-between',
       'justify-around',
       'justify-evenly',
@@ -7376,10 +7425,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;
     }
@@ -7424,18 +7481,28 @@ 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(`
     ".justify-items-center {
       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;
     }
@@ -8284,7 +8351,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(`
@@ -8296,10 +8365,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;
     }
@@ -8331,7 +8408,9 @@ test('self', async () => {
       'self-auto',
       'self-start',
       'self-end',
+      'self-end-safe',
       'self-center',
+      'self-center-safe',
       'self-stretch',
       'self-baseline',
     ]),
@@ -8348,10 +8427,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;
     }
@@ -8385,7 +8472,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',
     ]),
@@ -8398,10 +8487,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;
     }