Set browser targets for iOS Safari, Firefox, and Chrome

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Generate correct prefixes for iOS Safari, Firefox, and Chrome ([#15166](https://github.com/tailwindlabs/tailwindcss/pull/15166))
 
 ## [4.0.0-beta.2] - 2024-11-22
 

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/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;
     }