Remove invalid gradient fallbacks (#14705)

Prior to this PR we were providing fallback values for certain CSS
variables in our gradient utilities that just weren't necessary and
didn't do anything.

For example `bg-linear-to-r` was generating this:

```css
.bg-linear-to-r {
  --tw-gradient-position: to right;
  background-image: linear-gradient(
    var(--tw-gradient-stops, to right)
  );
}
```

…but `background-image: linear-gradient(to right)` is not valid CSS and
is thrown out by the browser.

This PR removes these fallback values entirely since there is nothing
sensible to fall back to anyways — you need to combine these utilities
with the `from-*`/`to-*` utilities or provide the complete gradient as
an arbitrary value for things to make sense.

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure `theme` values defined outside of `extend` in JS configuration files overwrite all existing values for that namespace ([#14672](https://github.com/tailwindlabs/tailwindcss/pull/14672))
+- Remove unnecessary variable fallbacks in gradient utilities ([#14705](https://github.com/tailwindlabs/tailwindcss/pull/14705))
 - _Upgrade (experimental)_: Speed up template migrations ([#14679](https://github.com/tailwindlabs/tailwindcss/pull/14679))
 - _Upgrade (experimental)_: Don't generate invalid CSS when migrating a complex `screens` config ([#14691](https://github.com/tailwindlabs/tailwindcss/pull/14691))
 

packages/tailwindcss/src/utilities.test.ts

@@ -9566,42 +9566,42 @@ test('bg', async () => {
 
     .bg-gradient-to-b {
       --tw-gradient-position: to bottom, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-bl {
       --tw-gradient-position: to bottom left, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to bottom left));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-br {
       --tw-gradient-position: to bottom right, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to bottom right));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-l {
       --tw-gradient-position: to left, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to left));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-r {
       --tw-gradient-position: to right, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to right));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-t {
       --tw-gradient-position: to top, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to top));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tl {
       --tw-gradient-position: to top left, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to top left));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-gradient-to-tr {
       --tw-gradient-position: to top right, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to top right));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-\\[1\\.3rad\\] {
@@ -9614,44 +9614,49 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops, 125deg));
     }
 
-    .bg-linear-\\[to_bottom\\], .bg-linear-to-b {
+    .bg-linear-\\[to_bottom\\] {
       --tw-gradient-position: to bottom, ;
       background-image: linear-gradient(var(--tw-gradient-stops, to bottom));
     }
 
+    .bg-linear-to-b {
+      --tw-gradient-position: to bottom, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
     .bg-linear-to-bl {
       --tw-gradient-position: to bottom left, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to bottom left));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-br {
       --tw-gradient-position: to bottom right, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to bottom right));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-l {
       --tw-gradient-position: to left, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to left));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-r {
       --tw-gradient-position: to right, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to right));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-t {
       --tw-gradient-position: to top, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to top));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-tl {
       --tw-gradient-position: to top left, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to top left));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-linear-to-tr {
       --tw-gradient-position: to top right, ;
-      background-image: linear-gradient(var(--tw-gradient-stops, to top right));
+      background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
     .bg-\\[image\\:var\\(--my-gradient\\)\\] {

packages/tailwindcss/src/utilities.ts

@@ -2517,12 +2517,12 @@ export function createUtilities(theme: Theme) {
   ]) {
     staticUtility(`bg-gradient-to-${value}`, [
       ['--tw-gradient-position', `to ${direction},`],
-      ['background-image', `linear-gradient(var(--tw-gradient-stops, to ${direction}))`],
+      ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
     ])
 
     staticUtility(`bg-linear-to-${value}`, [
       ['--tw-gradient-position', `to ${direction},`],
-      ['background-image', `linear-gradient(var(--tw-gradient-stops, to ${direction}))`],
+      ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
     ])
   }
 
@@ -2578,7 +2578,7 @@ export function createUtilities(theme: Theme) {
 
       return [
         decl('--tw-gradient-position', `from ${value},`),
-        decl('background-image', `conic-gradient(var(--tw-gradient-stops,from ${value}))`),
+        decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
       ]
     }
   })