Set browser targets for iOS Safari, Firefox, and Chrome

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Ensure any necessary vendor prefixes are generated for iOS Safari, Firefox, and Chrome ([#15166](https://github.com/tailwindlabs/tailwindcss/pull/15166))
 - Ensure `.group` and `.peer` are prefixed when using the `prefix(…)` option ([#15174](https://github.com/tailwindlabs/tailwindcss/pull/15174))
 - Ensure 3D transforms render correctly in Safari ([#15179](https://github.com/tailwindlabs/tailwindcss/pull/15179))
 

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -437,6 +437,9 @@ function optimizeCss(
       exclude: Features.LogicalProperties,
       targets: {
         safari: (16 << 16) | (4 << 8),
+        ios_saf: (16 << 16) | (4 << 8),
+        firefox: 128 << 16,
+        chrome: 120 << 16,
       },
       errorRecovery: true,
     }).code

packages/@tailwindcss-postcss/src/index.ts

@@ -241,6 +241,9 @@ function optimizeCss(
       exclude: Features.LogicalProperties,
       targets: {
         safari: (16 << 16) | (4 << 8),
+        ios_saf: (16 << 16) | (4 << 8),
+        firefox: 128 << 16,
+        chrome: 120 << 16,
       },
       errorRecovery: true,
     }).code

packages/@tailwindcss-vite/src/index.ts

@@ -342,6 +342,9 @@ function optimizeCss(
       exclude: Features.LogicalProperties,
       targets: {
         safari: (16 << 16) | (4 << 8),
+        ios_saf: (16 << 16) | (4 << 8),
+        firefox: 128 << 16,
+        chrome: 120 << 16,
       },
       errorRecovery: true,
     }).code

packages/tailwindcss/src/index.test.ts

@@ -151,6 +151,23 @@ describe('compiling CSS', () => {
       }"
     `)
   })
+
+  test('adds vendor prefixes', async () => {
+    expect(
+      await compileCss(
+        css`
+          @tailwind utilities;
+        `,
+        ['[text-size-adjust:none]'],
+      ),
+    ).toMatchInlineSnapshot(`
+      ".\\[text-size-adjust\\:none\\] {
+        -webkit-text-size-adjust: none;
+        -moz-text-size-adjust: none;
+        text-size-adjust: none;
+      }"
+    `)
+  })
 })
 
 describe('arbitrary properties', () => {

packages/tailwindcss/src/test-utils/run.ts

@@ -31,6 +31,9 @@ export function optimizeCss(
       exclude: Features.LogicalProperties,
       targets: {
         safari: (16 << 16) | (4 << 8),
+        ios_saf: (16 << 16) | (4 << 8),
+        firefox: 128 << 16,
+        chrome: 120 << 16,
       },
       errorRecovery: true,
     }).code

packages/tailwindcss/src/utilities.test.ts

@@ -11803,22 +11803,22 @@ test('box-decoration', async () => {
 test('bg-clip', async () => {
   expect(await run(['bg-clip-border', 'bg-clip-padding', 'bg-clip-content', 'bg-clip-text']))
     .toMatchInlineSnapshot(`
-    ".bg-clip-border {
-      background-clip: border-box;
-    }
+      ".bg-clip-border {
+        background-clip: border-box;
+      }
 
-    .bg-clip-content {
-      background-clip: content-box;
-    }
+      .bg-clip-content {
+        background-clip: content-box;
+      }
 
-    .bg-clip-padding {
-      background-clip: padding-box;
-    }
+      .bg-clip-padding {
+        background-clip: padding-box;
+      }
 
-    .bg-clip-text {
-      background-clip: text;
-    }"
-  `)
+      .bg-clip-text {
+        background-clip: text;
+      }"
+    `)
   expect(
     await run([
       'bg-clip',

packages/tailwindcss/src/variants.test.ts

@@ -62,7 +62,11 @@ test('marker', async () => {
 
 test('selection', async () => {
   expect(await run(['selection:flex'])).toMatchInlineSnapshot(`
-    ".selection\\:flex ::selection, .selection\\:flex::selection {
+    ".selection\\:flex ::selection {
+      display: flex;
+    }
+
+    .selection\\:flex::selection {
       display: flex;
     }"
   `)
@@ -2161,7 +2165,15 @@ test('variant order', async () => {
       }
     }
 
-    .first-letter\\:flex:first-letter, .first-line\\:flex:first-line, .marker\\:flex ::marker, .marker\\:flex::marker, .selection\\:flex ::selection, .selection\\:flex::selection {
+    .first-letter\\:flex:first-letter, .first-line\\:flex:first-line, .marker\\:flex ::marker, .marker\\:flex::marker {
+      display: flex;
+    }
+
+    .selection\\:flex ::selection {
+      display: flex;
+    }
+
+    .selection\\:flex::selection {
       display: flex;
     }