Use longform length + percentage syntax for properties

Using properties that declare the shorthand syntax `<length-percentage>` has a bug where two properties side-by-side e.g. `var(—foo)var(—bar)` invalidate the property value when it should not. Switching the `@property` definition to use the long form syntax `<length> | <percentage>` fixes this.

packages/tailwindcss/src/utilities.ts

@@ -1214,8 +1214,8 @@ export function createUtilities(theme: Theme) {
 
   let translateProperties = () =>
     atRoot([
-      property('--tw-translate-x', '0', '<length-percentage>'),
-      property('--tw-translate-y', '0', '<length-percentage>'),
+      property('--tw-translate-x', '0', '<length> | <percentage>'),
+      property('--tw-translate-y', '0', '<length> | <percentage>'),
       property('--tw-translate-z', '0', '<length>'),
     ])
 
@@ -2571,9 +2571,9 @@ export function createUtilities(theme: Theme) {
       property('--tw-gradient-to', 'transparent', '<color>'),
       property('--tw-gradient-stops'),
       property('--tw-gradient-via-stops'),
-      property('--tw-gradient-from-position', '0%', '<length-percentage>'),
-      property('--tw-gradient-via-position', '50%', '<length-percentage>'),
-      property('--tw-gradient-to-position', '100%', '<length-percentage>'),
+      property('--tw-gradient-from-position', '0%', '<length> | <percentage>'),
+      property('--tw-gradient-via-position', '50%', '<length> | <percentage>'),
+      property('--tw-gradient-to-position', '100%', '<length> | <percentage>'),
     ])
   }