Support linear gradient angles as bare values

tailwindlabs · Oct 17, 2024 · b29813b · b29813b
1 parent feeb9f1
commit b29813b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/tailwindcss/src/utilities.ts b/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}))`),
+      ]
     }
   })
 

diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
@@ -41,6 +41,14 @@ 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',
+    '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%)',