Refactor gradient implementation to work around prettier/prettier#17058

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
 - Ensure we process Tailwind CSS features when only using `@reference` or `@variant` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057))
+- Refactor gradient implementation to work around [prettier/prettier#17058](https://github.com/prettier/prettier/issues/17058) ([#16072](https://github.com/tailwindlabs/tailwindcss/pull/16072))
 
 ## [4.0.1] - 2025-01-29
 

packages/tailwindcss/src/compat/legacy-utilities.test.ts

@@ -22,42 +22,42 @@ test('bg-gradient-*', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-gradient-to-b {
-      --tw-gradient-position: to bottom in oklab, ;
+      --tw-gradient-position: to bottom in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-bl {
-      --tw-gradient-position: to bottom left in oklab, ;
+      --tw-gradient-position: to bottom left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-br {
-      --tw-gradient-position: to bottom right in oklab, ;
+      --tw-gradient-position: to bottom right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-l {
-      --tw-gradient-position: to left in oklab, ;
+      --tw-gradient-position: to left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-r {
-      --tw-gradient-position: to right in oklab, ;
+      --tw-gradient-position: to right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-t {
-      --tw-gradient-position: to top in oklab, ;
+      --tw-gradient-position: to top in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tl {
-      --tw-gradient-position: to top left in oklab, ;
+      --tw-gradient-position: to top left in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tr {
-      --tw-gradient-position: to top right in oklab, ;
+      --tw-gradient-position: to top right in oklab;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }"
   `)

packages/tailwindcss/src/compat/legacy-utilities.ts

@@ -14,7 +14,7 @@ export function registerLegacyUtilities(designSystem: DesignSystem) {
     ['tl', 'top left'],
   ]) {
     designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
-      decl('--tw-gradient-position', `to ${direction} in oklab,`),
+      decl('--tw-gradient-position', `to ${direction} in oklab`),
       decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
     ])
   }