Support linear gradient angles as bare values (#14707)

This PR adds support for linear gradient angles as bare values, like
this:

```
bg-linear-45 => linear-gradient(45deg, …)
```

We already support this for [conic
gradients](#14467), so
this makes these utilities more consistent.

---------

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

Author: adamwathan

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add first draft of new wide-gamut color palette ([#14693](https://github.com/tailwindlabs/tailwindcss/pull/14693))
+- Support linear gradient angles as bare values ([#14707](https://github.com/tailwindlabs/tailwindcss/pull/14707))
 - _Upgrade (experimental)_: Migrate `theme(…)` calls to `var(…)` or to the modern `theme(…)` syntax ([#14664](https://github.com/tailwindlabs/tailwindcss/pull/14664), [#14695](https://github.com/tailwindlabs/tailwindcss/pull/14695))
 
 ### Fixed

packages/tailwindcss/src/utilities.test.ts

@@ -9448,6 +9448,8 @@ test('bg', async () => {
         'bg-linear-to-bl',
         'bg-linear-to-l',
         'bg-linear-to-tl',
+        'bg-linear-45',
+        '-bg-linear-45',
 
         'bg-[url(/image.png)]',
         'bg-[url:var(--my-url)]',
@@ -9554,6 +9556,11 @@ test('bg', async () => {
       background-color: #0000;
     }
 
+    .-bg-linear-45 {
+      --tw-gradient-position: calc(45deg * -1), ;
+      background-image: linear-gradient(var(--tw-gradient-stops, calc(45deg * -1)));
+    }
+
     .-bg-linear-\\[1\\.3rad\\] {
       --tw-gradient-position: calc(74.4845deg * -1), ;
       background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
@@ -9604,6 +9611,11 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .bg-linear-45 {
+      --tw-gradient-position: 45deg, ;
+      background-image: linear-gradient(var(--tw-gradient-stops, 45deg));
+    }
+
     .bg-linear-\\[1\\.3rad\\] {
       --tw-gradient-position: 74.4845deg, ;
       background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));

packages/tailwindcss/src/utilities.ts

@@ -2529,8 +2529,9 @@ export function createUtilities(theme: Theme) {
   utilities.functional('bg-linear', (candidate) => {
     if (!candidate.value || candidate.modifier) return
 
+    let value = candidate.value.value
+
     if (candidate.value.kind === 'arbitrary') {
-      let value: string | null = candidate.value.value
       let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
 
       switch (type) {
@@ -2551,6 +2552,15 @@ export function createUtilities(theme: Theme) {
           ]
         }
       }
+    } else {
+      if (!isPositiveInteger(value)) return
+
+      value = withNegative(`${value}deg`, candidate)
+
+      return [
+        decl('--tw-gradient-position', `${value},`),
+        decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
+      ]
     }
   })
 

packages/tailwindcss/tests/ui.spec.ts

@@ -41,6 +41,19 @@ for (let [classes, expected] of [
     'bg-linear-to-r from-red to-blue',
     'linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
   ],
+  [
+    'bg-linear-45 from-red to-blue',
+    'linear-gradient(45deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+  ],
+  [
+    '-bg-linear-45 from-red to-blue',
+    // Chrome reports a different (but also correct) computed value than Firefox/WebKit so we check
+    // for both options.
+    [
+      'linear-gradient(-45deg, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+      'linear-gradient(calc(-45deg), rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%)',
+    ],
+  ],
   [
     'bg-linear-to-r via-red to-blue',
     'linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgb(0, 0, 255) 100%)',
@@ -60,7 +73,11 @@ for (let [classes, expected] of [
       html`<div id="x" class="${classes}">Hello world</div>`,
     )
 
-    expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'background-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'background-image')).toEqual(expected)
+    }
   })
 }