tailwindcss 0.0.0-oxide-insiders.cf21d57 → 0.0.0-oxide-insiders.b88c8c4

package/lib/corePlugins.js

@@ -2740,30 +2740,63 @@ let corePlugins = {
                     "any"
                 ]
             };
+            let positionOptions = {
+                values: theme("gradientColorStopPositions"),
+                type: [
+                    "length",
+                    "percentage"
+                ]
+            };
             matchUtilities({
                 from: (value)=>{
                     let transparentToValue = transparentTo(value);
                     return {
-                        "--tw-gradient-from": (0, _toColorValue.default)(value, "from"),
-                        "--tw-gradient-to": transparentToValue,
+                        "--tw-gradient-from": `${(0, _toColorValue.default)(value, "from")} var(--tw-gradient-from-position)`,
+                        "--tw-gradient-from-position": " ",
+                        "--tw-gradient-to": `${transparentToValue}  var(--tw-gradient-from-position)`,
+                        "--tw-gradient-to-position": " ",
                         "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to)`
                     };
                 }
             }, options);
+            matchUtilities({
+                from: (value)=>{
+                    return {
+                        "--tw-gradient-from-position": value
+                    };
+                }
+            }, positionOptions);
             matchUtilities({
                 via: (value)=>{
                     let transparentToValue = transparentTo(value);
                     return {
-                        "--tw-gradient-to": transparentToValue,
-                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue.default)(value, "via")}, var(--tw-gradient-to)`
+                        "--tw-gradient-via-position": " ",
+                        "--tw-gradient-to": `${transparentToValue}  var(--tw-gradient-to-position)`,
+                        "--tw-gradient-to-position": " ",
+                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue.default)(value, "via")} var(--tw-gradient-via-position), var(--tw-gradient-to)`
                     };
                 }
             }, options);
+            matchUtilities({
+                via: (value)=>{
+                    return {
+                        "--tw-gradient-via-position": value
+                    };
+                }
+            }, positionOptions);
             matchUtilities({
                 to: (value)=>({
-                        "--tw-gradient-to": (0, _toColorValue.default)(value, "to")
+                        "--tw-gradient-to": `${(0, _toColorValue.default)(value, "to")} var(--tw-gradient-to-position)`,
+                        "--tw-gradient-to-position": " "
                     })
             }, options);
+            matchUtilities({
+                to: (value)=>{
+                    return {
+                        "--tw-gradient-to-position": value
+                    };
+                }
+            }, positionOptions);
         };
     })(),
     boxDecorationBreak: ({ addUtilities  })=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-oxide-insiders.cf21d57",
+  "version": "0.0.0-oxide-insiders.b88c8c4",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -70,7 +70,7 @@
     "postcss": "^8.0.9"
   },
   "dependencies": {
-    "@tailwindcss/oxide": "0.0.0-oxide-insiders.cf21d57",
+    "@tailwindcss/oxide": "0.0.0-oxide-insiders.b88c8c4",
     "arg": "^5.0.2",
     "browserslist": "^4.21.5",
     "chokidar": "^3.5.3",

package/src/corePlugins.js

@@ -1756,40 +1756,92 @@ export let corePlugins = {
         type: ['color', 'any'],
       }
 
+      let positionOptions = {
+        values: theme('gradientColorStopPositions'),
+        type: ['length', 'percentage'],
+      }
+
       matchUtilities(
         {
           from: (value) => {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-from': toColorValue(value, 'from'),
-              '--tw-gradient-to': transparentToValue,
+              '--tw-gradient-from': `${toColorValue(
+                value,
+                'from'
+              )} var(--tw-gradient-from-position)`,
+              '--tw-gradient-from-position': ' ',
+              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-from-position)`,
+              '--tw-gradient-to-position': ' ',
               '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
         },
         options
       )
+
+      matchUtilities(
+        {
+          from: (value) => {
+            return {
+              '--tw-gradient-from-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
+
       matchUtilities(
         {
           via: (value) => {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-to': transparentToValue,
+              '--tw-gradient-via-position': ' ',
+              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-to-position)`,
+              '--tw-gradient-to-position': ' ',
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
                 value,
                 'via'
-              )}, var(--tw-gradient-to)`,
+              )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
             }
           },
         },
         options
       )
+
       matchUtilities(
-        { to: (value) => ({ '--tw-gradient-to': toColorValue(value, 'to') }) },
+        {
+          via: (value) => {
+            return {
+              '--tw-gradient-via-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
+
+      matchUtilities(
+        {
+          to: (value) => ({
+            '--tw-gradient-to': `${toColorValue(value, 'to')} var(--tw-gradient-to-position)`,
+            '--tw-gradient-to-position': ' ',
+          }),
+        },
         options
       )
+
+      matchUtilities(
+        {
+          to: (value) => {
+            return {
+              '--tw-gradient-to-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
     }
   })(),
 

package/stubs/config.full.js

@@ -355,6 +355,29 @@ module.exports = {
     },
     gap: ({ theme }) => theme('spacing'),
     gradientColorStops: ({ theme }) => theme('colors'),
+    gradientColorStopPositions: {
+      '0%': '0%',
+      '5%': '5%',
+      '10%': '10%',
+      '15%': '15%',
+      '20%': '20%',
+      '25%': '25%',
+      '30%': '30%',
+      '35%': '35%',
+      '40%': '40%',
+      '45%': '45%',
+      '50%': '50%',
+      '55%': '55%',
+      '60%': '60%',
+      '65%': '65%',
+      '70%': '70%',
+      '75%': '75%',
+      '80%': '80%',
+      '85%': '85%',
+      '90%': '90%',
+      '95%': '95%',
+      '100%': '100%',
+    },
     grayscale: {
       0: '0',
       DEFAULT: '100%',

package/types/generated/default-theme.d.ts

@@ -153,6 +153,30 @@ export type DefaultTheme = Config['theme'] & {
     | 'black',
     string
   >
+  gradientColorStopPositions: Record<
+    | '0%'
+    | '5%'
+    | '10%'
+    | '15%'
+    | '20%'
+    | '25%'
+    | '30%'
+    | '35%'
+    | '40%'
+    | '45%'
+    | '50%'
+    | '55%'
+    | '60%'
+    | '65%'
+    | '70%'
+    | '75%'
+    | '80%'
+    | '85%'
+    | '90%'
+    | '95%'
+    | '100%',
+    string
+  >
   grayscale: Record<'0' | 'DEFAULT', string>
   gridAutoColumns: Record<'auto' | 'min' | 'max' | 'fr', string>
   gridAutoRows: Record<'auto' | 'min' | 'max' | 'fr', string>