Add new gradient color stop positions docs

Author: reinink

src/components/CustomizePluginColors/index.jsx

@@ -1,7 +1,7 @@
 import { Editor } from '@/components/Editor'
 import { highlightedCode } from './snippet.js?highlight=diff-js'
 
-export function CustomizePluginColors({ name, configKey, children }) {
+export function CustomizePluginColors({ name, configKey, children, learnMore = true }) {
   return (
     <>
       <p>
@@ -27,10 +27,12 @@ export function CustomizePluginColors({ name, configKey, children }) {
         <code>theme.{configKey}</code> or <code>theme.extend.{configKey}</code> in your{' '}
         <code>tailwind.config.js</code> file.
       </p>
-      <p>
-        Learn more about customizing the default theme in the{' '}
-        <a href="/docs/theme#customizing-the-default-theme">theme customization</a> documentation.
-      </p>
+      {learnMore && (
+        <p>
+          Learn more about customizing the default theme in the{' '}
+          <a href="/docs/theme#customizing-the-default-theme">theme customization</a> documentation.
+        </p>
+      )}
     </>
   )
 }

src/pages/docs/gradient-color-stops.mdx

@@ -109,6 +109,34 @@ Add a middle color to a gradient using the `via-{color}` utilities.
 
 Gradients with a `from-{color}` and `via-{color}` will fade out to transparent by default if no `to-{color}` is present.
 
+### Specifying stop positions
+
+You can also specify the gradient color stop positions using the `from-{position}`, `via-{position}` and `to-{position}` utilities.
+
+<Example>
+  <div class="space-y-2 mx-5">
+    <div class="relative h-16">
+      <div class="absolute left-[calc(10%-20px)] flex flex-col space-y-2 items-center">
+        <div class="rounded-full h-10 w-10 bg-indigo-500 border-4 border-white shadow-lg text-white text-[11px] font-semibold font-mono flex items-center justify-center">10%</div>
+        <div class="bg-slate-300 w-0.5 h-4"></div>
+      </div>
+      <div class="absolute left-[calc(30%-20px)] flex flex-col space-y-2 items-center">
+        <div class="rounded-full h-10 w-10 bg-sky-500 border-4 border-white shadow-lg text-white text-[11px] font-semibold font-mono flex items-center justify-center">30%</div>
+        <div class="bg-slate-300 w-0.5 h-4"></div>
+      </div>
+      <div class="absolute left-[calc(90%-20px)] flex flex-col space-y-2 items-center">
+        <div class="rounded-full h-10 w-10 bg-emerald-500 border-4 border-white shadow-lg text-white text-[11px] font-semibold font-mono flex items-center justify-center">90%</div>
+        <div class="bg-slate-300 w-0.5 h-4"></div>
+      </div>
+    </div>
+    <div class="p-4 rounded-lg bg-gradient-to-r from-indigo-500 from-10 via-sky-500 via-30 to-emerald-500 to-90">&nbsp;</div>
+  </div>
+</Example>
+
+```html
+<div class="bg-gradient-to-r from-indigo-500 **from-10** via-purple-500 **via-30** to-pink-500 **to-90** ..."></div>
+```
+
 ### Fading to transparent
 
 Gradients fade out to transparent by default, without requiring you to add `to-transparent` explicitly. Tailwind intelligently calculates the _right_ "transparent" value to use based on the starting color to avoid [a bug in Safari < 15.4](https://bugs.webkit.org/show_bug.cgi?id=150940) that causes fading to simply the `transparent` keyword to fade through gray, which just looks awful.
@@ -163,8 +191,24 @@ Gradients fade out to transparent by default, without requiring you to add `to-t
 
 ### Customizing your theme
 
-<CustomizePluginColors name="gradient" configKey="gradientColorStops" />
+<CustomizePluginColors name="gradient" configKey="gradientColorStops" learnMore={false} />
+
+In addition to the colors, you can also customize the gradient color stop positions by editing `theme.gradientColorStopPositions` or `theme.extend.gradientColorStopPositions`.
+
+```diff-js tailwind.config.js
+  module.exports = {
+    theme: {
+      extend: {
++       gradientColorStopPositions: {
++         33: '33%',
++       }
+      }
+    }
+  }
+```
+
+Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation.
 
 ### Arbitrary values
 
-<ArbitraryValues property="from|via|to-{color}" featuredClass="from-[#243c5a]" />
+<ArbitraryValues property="from|via|to-{color|position}" featuredClass="from-[#243c5a]" />