Add safe alignment utilities

tailwindlabs · Oct 5, 2024 · 2d58738 · 2d58738
1 parent c01b825
commit 2d58738
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 2 deletions.
diff --git 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
@@ -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,18 +6870,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;
     }
@@ -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;
     }