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

Author: RobinMalfait

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
 

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 {

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,