[v4] Support arbitrary gradient angles (tailwindlabs#13783)

* Support arbitrary gradient angles

* Update changelog

* Use the `bg-linear` namespace instead

* Tweak comments

* Update changelog

* Support negative angles

* Update changelog

* Update changelog

* Update changelog

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -16,6 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `nth-*` variants ([#13661](https://github.com/tailwindlabs/tailwindcss/pull/13661))
+- Add `bg-linear-*` utilities as an alias for the existing `bg-gradient-*` utilities ([#13783](https://github.com/tailwindlabs/tailwindcss/pull/13783))
+- Support arbitrary linear gradient angles (e.g. `bg-linear-[125deg]`) ([#13783](https://github.com/tailwindlabs/tailwindcss/pull/13783))
 
 ## [4.0.0-alpha.15] - 2024-05-08
 

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -490,6 +490,14 @@ exports[`getClassList 1`] = `
   "bg-left",
   "bg-left-bottom",
   "bg-left-top",
+  "bg-linear-to-b",
+  "bg-linear-to-bl",
+  "bg-linear-to-br",
+  "bg-linear-to-l",
+  "bg-linear-to-r",
+  "bg-linear-to-t",
+  "bg-linear-to-tl",
+  "bg-linear-to-tr",
   "bg-local",
   "bg-no-repeat",
   "bg-none",

packages/tailwindcss/src/utilities.test.ts

@@ -7690,6 +7690,8 @@ test('bg', () => {
 
         // background-image
         'bg-none',
+
+        // Legacy linear-gradient API
         'bg-gradient-to-t',
         'bg-gradient-to-tr',
         'bg-gradient-to-r',
@@ -7698,10 +7700,26 @@ test('bg', () => {
         'bg-gradient-to-bl',
         'bg-gradient-to-l',
         'bg-gradient-to-tl',
+
+        // Modern linear-gradient API
+        'bg-linear-to-t',
+        'bg-linear-to-tr',
+        'bg-linear-to-r',
+        'bg-linear-to-br',
+        'bg-linear-to-b',
+        'bg-linear-to-bl',
+        'bg-linear-to-l',
+        'bg-linear-to-tl',
+
         'bg-[url(/image.png)]',
         'bg-[url:--my-url]',
         'bg-[linear-gradient(to_bottom,red,blue)]',
         'bg-[image:--my-gradient]',
+        'bg-linear-[125deg]',
+        'bg-linear-[1.3rad]',
+        'bg-linear-[to_bottom]',
+        '-bg-linear-[125deg]',
+        '-bg-linear-[1.3rad]',
 
         // background-size
         'bg-auto',
@@ -7794,6 +7812,14 @@ test('bg', () => {
       background-color: #0000;
     }
 
+    .-bg-linear-\\[1\\.3rad\\] {
+      background-image: linear-gradient(calc(74.4845deg * -1), var(--tw-gradient-stops, ));
+    }
+
+    .-bg-linear-\\[125deg\\] {
+      background-image: linear-gradient(calc(125deg * -1), var(--tw-gradient-stops, ));
+    }
+
     .bg-\\[image\\:--my-gradient\\] {
       background-image: var(--my-gradient);
     }
@@ -7842,6 +7868,46 @@ test('bg', () => {
       background-image: linear-gradient(to top right, var(--tw-gradient-stops, ));
     }
 
+    .bg-linear-\\[1\\.3rad\\] {
+      background-image: linear-gradient(74.4845deg, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-\\[125deg\\] {
+      background-image: linear-gradient(125deg, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-\\[to_bottom\\], .bg-linear-to-b {
+      background-image: linear-gradient(to bottom, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-bl {
+      background-image: linear-gradient(to bottom left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-br {
+      background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-l {
+      background-image: linear-gradient(to left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-r {
+      background-image: linear-gradient(to right, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-t {
+      background-image: linear-gradient(to top, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-tl {
+      background-image: linear-gradient(to top left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-tr {
+      background-image: linear-gradient(to top right, var(--tw-gradient-stops, ));
+    }
+
     .bg-none {
       background-image: none;
     }
@@ -7974,6 +8040,8 @@ test('bg', () => {
       // background-image
       '-bg-none',
       '-bg-gradient-to-br',
+      '-bg-linear-to-br',
+      '-bg-linear-[to_bottom]',
 
       // background-size
       '-bg-auto',

packages/tailwindcss/src/utilities.ts

@@ -2497,8 +2497,34 @@ export function createUtilities(theme: Theme) {
     staticUtility(`bg-gradient-to-${value}`, [
       ['background-image', `linear-gradient(to ${direction}, var(--tw-gradient-stops,))`],
     ])
+
+    staticUtility(`bg-linear-to-${value}`, [
+      ['background-image', `linear-gradient(to ${direction}, var(--tw-gradient-stops,))`],
+    ])
   }
 
+  utilities.functional('bg-linear', (candidate) => {
+    if (!candidate.value) return
+
+    if (candidate.value.kind === 'arbitrary') {
+      let value: string | null = candidate.value.value
+      let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
+
+      switch (type) {
+        case 'angle': {
+          value = withNegative(value, candidate)
+
+          return [decl('background-image', `linear-gradient(${value}, var(--tw-gradient-stops,))`)]
+        }
+        default: {
+          if (candidate.negative) return
+
+          return [decl('background-image', `linear-gradient(${value}, var(--tw-gradient-stops,))`)]
+        }
+      }
+    }
+  })
+
   utilities.functional('bg', (candidate) => {
     if (candidate.negative || !candidate.value) return