From 82d486adb535d50f11ed9ec7f6a8a7ccf7c2bc07 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 5 Feb 2025 12:04:43 +0100
Subject: [PATCH] Fix `order-first` and `order-last` for Firefox (#16266)

This PR fixes an issue where `order-last` doesn't work as expected in
Firefox.

The implementation of `order-last`, looks like this:
```css
.order-last {
  order: calc(infinity);
}
```

Which is valid CSS, and `calc(infinity)` is even valid in Firefox. You
can use this in other properties such as `border-radius`:
```css
.rounded-full {
  border-radius: calc(infinity * 1px);
}
```

While this works, in properties like `order` it just doesn't work.

Fixes: #16165
---
 CHANGELOG.md                               | 1 +
 packages/tailwindcss/src/utilities.test.ts | 4 ++--
 packages/tailwindcss/src/utilities.ts      | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 71cd3e343..ab3333224 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure that the `containers` JS theme key is added to the `--container-*` namespace ([#16169](https://github.com/tailwindlabs/tailwindcss/pull/16169))
 - Fix missing `@keyframes` definition ([#16237](https://github.com/tailwindlabs/tailwindcss/pull/16237))
 - Vite: Skip parsing stylesheets with the `?commonjs-proxy` flag ([#16238](https://github.com/tailwindlabs/tailwindcss/pull/16238))
+- Fix `order-first` and `order-last` for Firefox ([#16266](https://github.com/tailwindlabs/tailwindcss/pull/16266))
 
 ## [4.0.3] - 2025-02-01
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 10720b167..4da13ed64 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -1053,11 +1053,11 @@ test('order', async () => {
     }
 
     .order-first {
-      order: calc(-infinity);
+      order: -9999;
     }
 
     .order-last {
-      order: calc(infinity);
+      order: 9999;
     }
 
     .order-none {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 9f4a1039b..3dadacac1 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -576,8 +576,8 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `order`
    */
-  staticUtility('order-first', [['order', 'calc(-infinity)']])
-  staticUtility('order-last', [['order', 'calc(infinity)']])
+  staticUtility('order-first', [['order', '-9999']])
+  staticUtility('order-last', [['order', '9999']])
   staticUtility('order-none', [['order', '0']])
   functionalUtility('order', {
     supportsNegative: true,