diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 3f5fd56b7811..6adc96113d46 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -11,6 +11,7 @@ exports[`border-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border {
@@ -111,6 +112,10 @@ exports[`border-* 1`] = `
   }
 }
 
+.border-blue-500 {
+  border-color: var(--border-color-blue-500);
+}
+
 .border-current, .border-current\\/50 {
   border-color: currentColor;
 }
@@ -191,6 +196,7 @@ exports[`border-b-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-b {
@@ -291,6 +297,10 @@ exports[`border-b-* 1`] = `
   }
 }
 
+.border-b-blue-500 {
+  border-bottom-color: var(--border-color-blue-500);
+}
+
 .border-b-current, .border-b-current\\/50 {
   border-bottom-color: currentColor;
 }
@@ -371,6 +381,7 @@ exports[`border-e-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-e {
@@ -471,6 +482,10 @@ exports[`border-e-* 1`] = `
   }
 }
 
+.border-e-blue-500 {
+  border-inline-end-color: var(--border-color-blue-500);
+}
+
 .border-e-current, .border-e-current\\/50 {
   border-inline-end-color: currentColor;
 }
@@ -551,6 +566,7 @@ exports[`border-l-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-l {
@@ -651,6 +667,10 @@ exports[`border-l-* 1`] = `
   }
 }
 
+.border-l-blue-500 {
+  border-left-color: var(--border-color-blue-500);
+}
+
 .border-l-current, .border-l-current\\/50 {
   border-left-color: currentColor;
 }
@@ -731,6 +751,7 @@ exports[`border-r-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-r {
@@ -831,6 +852,10 @@ exports[`border-r-* 1`] = `
   }
 }
 
+.border-r-blue-500 {
+  border-right-color: var(--border-color-blue-500);
+}
+
 .border-r-current, .border-r-current\\/50 {
   border-right-color: currentColor;
 }
@@ -911,6 +936,7 @@ exports[`border-s-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-s {
@@ -1011,6 +1037,10 @@ exports[`border-s-* 1`] = `
   }
 }
 
+.border-s-blue-500 {
+  border-inline-start-color: var(--border-color-blue-500);
+}
+
 .border-s-current, .border-s-current\\/50 {
   border-inline-start-color: currentColor;
 }
@@ -1091,6 +1121,7 @@ exports[`border-t-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-t {
@@ -1191,6 +1222,10 @@ exports[`border-t-* 1`] = `
   }
 }
 
+.border-t-blue-500 {
+  border-top-color: var(--border-color-blue-500);
+}
+
 .border-t-current, .border-t-current\\/50 {
   border-top-color: currentColor;
 }
@@ -1271,6 +1306,7 @@ exports[`border-x-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-x {
@@ -1371,6 +1407,10 @@ exports[`border-x-* 1`] = `
   }
 }
 
+.border-x-blue-500 {
+  border-inline-color: var(--border-color-blue-500);
+}
+
 .border-x-current, .border-x-current\\/50 {
   border-inline-color: currentColor;
 }
@@ -1451,6 +1491,7 @@ exports[`border-y-* 1`] = `
 
 :root, :host {
   --color-red-500: #ef4444;
+  --border-color-blue-500: #3b82f6;
 }
 
 .border-y {
@@ -1551,6 +1592,10 @@ exports[`border-y-* 1`] = `
   }
 }
 
+.border-y-blue-500 {
+  border-block-color: var(--border-color-blue-500);
+}
+
 .border-y-current, .border-y-current\\/50 {
   border-block-color: currentColor;
 }
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index c3af45d3b7ef..01ad6576db25 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -8411,6 +8411,7 @@ test('accent', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --accent-color-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -8422,6 +8423,7 @@ test('accent', async () => {
         'accent-red-500/2.75',
         'accent-red-500/[0.5]',
         'accent-red-500/[50%]',
+        'accent-blue-500',
         'accent-current',
         'accent-current/50',
         'accent-current/[0.5]',
@@ -8437,6 +8439,7 @@ test('accent', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --accent-color-blue-500: #3b82f6;
     }
 
     .accent-\\[\\#0088cc\\] {
@@ -8447,6 +8450,10 @@ test('accent', async () => {
       accent-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
+    .accent-blue-500 {
+      accent-color: var(--accent-color-blue-500);
+    }
+
     .accent-current, .accent-current\\/50 {
       accent-color: currentColor;
     }
@@ -8592,6 +8599,7 @@ test('caret', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --caret-color-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -8603,6 +8611,7 @@ test('caret', async () => {
         'caret-red-500/2.75',
         'caret-red-500/[0.5]',
         'caret-red-500/[50%]',
+        'caret-blue-500',
         'caret-current',
         'caret-current/50',
         'caret-current/[0.5]',
@@ -8618,6 +8627,7 @@ test('caret', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --caret-color-blue-500: #3b82f6;
     }
 
     .caret-\\[\\#0088cc\\] {
@@ -8628,6 +8638,10 @@ test('caret', async () => {
       caret-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
+    .caret-blue-500 {
+      caret-color: var(--caret-color-blue-500);
+    }
+
     .caret-current, .caret-current\\/50 {
       caret-color: currentColor;
     }
@@ -10595,6 +10609,7 @@ for (let prefix of prefixes) {
     classes.push(`${prefix}-red-500/2.25`)
     classes.push(`${prefix}-red-500/2.5`)
     classes.push(`${prefix}-red-500/2.75`)
+    classes.push(`${prefix}-blue-500`)
     classes.push(`${prefix}-[#0088cc]`)
     classes.push(`${prefix}-[#0088cc]/50`)
     classes.push(`${prefix}-current`)
@@ -10616,6 +10631,7 @@ for (let prefix of prefixes) {
             --radius-full: 9999px;
             --radius-sm: 0.125rem;
             --color-red-500: #ef4444;
+            --border-color-blue-500: #3b82f6;
           }
           @tailwind utilities;
         `,
@@ -10683,6 +10699,7 @@ test('bg', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --background-color-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -10695,6 +10712,7 @@ test('bg', async () => {
         'bg-red-500/2.75',
         'bg-red-500/[0.5]',
         'bg-red-500/[50%]',
+        'bg-blue-500',
         'bg-current',
         'bg-current/50',
         'bg-current/[0.5]',
@@ -10828,6 +10846,7 @@ test('bg', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --background-color-blue-500: #3b82f6;
     }
 
     .bg-\\[\\#0088cc\\] {
@@ -10898,6 +10917,10 @@ test('bg', async () => {
       }
     }
 
+    .bg-blue-500 {
+      background-color: var(--background-color-blue-500);
+    }
+
     .bg-current, .bg-current\\/50 {
       background-color: currentColor;
     }
@@ -19024,6 +19047,7 @@ test('fill', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --fill-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -19035,6 +19059,7 @@ test('fill', async () => {
         'fill-red-500/2.75',
         'fill-red-500/[0.5]',
         'fill-red-500/[50%]',
+        'fill-blue-500',
         'fill-current',
         'fill-current/50',
         'fill-current/[0.5]',
@@ -19050,6 +19075,7 @@ test('fill', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --fill-blue-500: #3b82f6;
     }
 
     .fill-\\[\\#0088cc\\] {
@@ -19060,6 +19086,10 @@ test('fill', async () => {
       fill: oklab(59.9824% -.067 -.124 / .5);
     }
 
+    .fill-blue-500 {
+      fill: var(--fill-blue-500);
+    }
+
     .fill-current, .fill-current\\/50 {
       fill: currentColor;
     }
@@ -19190,6 +19220,7 @@ test('stroke', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --stroke-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -19202,6 +19233,7 @@ test('stroke', async () => {
         'stroke-red-500/2.75',
         'stroke-red-500/[0.5]',
         'stroke-red-500/[50%]',
+        'stroke-blue-500',
         'stroke-current',
         'stroke-current/50',
         'stroke-current/[0.5]',
@@ -19237,6 +19269,7 @@ test('stroke', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --stroke-blue-500: #3b82f6;
     }
 
     .stroke-\\[\\#0088cc\\] {
@@ -19307,6 +19340,10 @@ test('stroke', async () => {
       }
     }
 
+    .stroke-blue-500 {
+      stroke: var(--stroke-blue-500);
+    }
+
     .stroke-current, .stroke-current\\/50 {
       stroke: currentColor;
     }
@@ -20508,6 +20545,7 @@ test('decoration', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --text-decoration-color-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -20517,6 +20555,7 @@ test('decoration', async () => {
         'decoration-red-500/50',
         'decoration-red-500/[0.5]',
         'decoration-red-500/[50%]',
+        'decoration-blue-500',
         'decoration-current',
         'decoration-current/50',
         'decoration-current/[0.5]',
@@ -20560,6 +20599,7 @@ test('decoration', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --text-decoration-color-blue-500: #3b82f6;
     }
 
     .decoration-\\[\\#0088cc\\] {
@@ -20654,6 +20694,12 @@ test('decoration', async () => {
       }
     }
 
+    .decoration-blue-500 {
+      -webkit-text-decoration-color: var(--text-decoration-color-blue-500);
+      -webkit-text-decoration-color: var(--text-decoration-color-blue-500);
+      text-decoration-color: var(--text-decoration-color-blue-500);
+    }
+
     .decoration-current, .decoration-current\\/50 {
       text-decoration-color: currentColor;
     }
@@ -22447,6 +22493,7 @@ test('outline', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --outline-color-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -22466,6 +22513,7 @@ test('outline', async () => {
         'outline-red-500/50',
         'outline-red-500/[0.5]',
         'outline-red-500/[50%]',
+        'outline-blue-500',
         'outline-current',
         'outline-current/50',
         'outline-current/[0.5]',
@@ -22510,6 +22558,7 @@ test('outline', async () => {
 
     :root, :host {
       --color-red-500: #ef4444;
+      --outline-color-blue-500: #3b82f6;
     }
 
     .outline-hidden {
@@ -22638,6 +22687,10 @@ test('outline', async () => {
       }
     }
 
+    .outline-blue-500 {
+      outline-color: var(--outline-color-blue-500);
+    }
+
     .outline-current, .outline-current\\/50 {
       outline-color: currentColor;
     }
@@ -22965,6 +23018,7 @@ test('text', async () => {
         @theme {
           --spacing: 0.25rem;
           --color-red-500: #ef4444;
+          --text-color-blue-500: #3b82f6;
           --text-sm: 0.875rem;
           --text-sm--line-height: 1.25rem;
           --leading-snug: 1.375;
@@ -22980,6 +23034,7 @@ test('text', async () => {
         'text-red-500/2.75',
         'text-red-500/[0.5]',
         'text-red-500/[50%]',
+        'text-blue-500',
         'text-current',
         'text-current/50',
         'text-current/[0.5]',
@@ -23028,6 +23083,7 @@ test('text', async () => {
     ":root, :host {
       --spacing: .25rem;
       --color-red-500: #ef4444;
+      --text-color-blue-500: #3b82f6;
       --text-sm: .875rem;
       --text-sm--line-height: 1.25rem;
       --leading-snug: 1.375;
@@ -23188,6 +23244,10 @@ test('text', async () => {
       }
     }
 
+    .text-blue-500 {
+      color: var(--text-color-blue-500);
+    }
+
     .text-current, .text-current\\/50 {
       color: currentColor;
     }
@@ -23702,6 +23762,7 @@ test('shadow', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --box-shadow-color-blue-500: #3b82f6;
           --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
           --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         }
@@ -23731,6 +23792,7 @@ test('shadow', async () => {
         'shadow-red-500/2.75',
         'shadow-red-500/[0.5]',
         'shadow-red-500/[50%]',
+        'shadow-blue-500',
         'shadow-current',
         'shadow-current/50',
         'shadow-current/[0.5]',
@@ -23771,6 +23833,7 @@ test('shadow', async () => {
 
     :root, :host {
       --color-red-500: #ef4444;
+      --box-shadow-color-blue-500: #3b82f6;
     }
 
     .shadow-\\[12px_12px_var\\(--value\\)\\]\\/25 {
@@ -23924,6 +23987,16 @@ test('shadow', async () => {
       }
     }
 
+    .shadow-blue-500 {
+      --tw-shadow-color: #3b82f6;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-blue-500 {
+        --tw-shadow-color: color-mix(in oklab, var(--box-shadow-color-blue-500) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
     .shadow-current {
       --tw-shadow-color: currentcolor;
     }
@@ -24641,6 +24714,7 @@ test('ring', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --ring-color-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -24654,6 +24728,7 @@ test('ring', async () => {
         'ring-red-500/2.75',
         'ring-red-500/[0.5]',
         'ring-red-500/[50%]',
+        'ring-blue-500',
         'ring-current',
         'ring-current/50',
         'ring-current/[0.5]',
@@ -24707,6 +24782,7 @@ test('ring', async () => {
 
     :root, :host {
       --color-red-500: #ef4444;
+      --ring-color-blue-500: #3b82f6;
     }
 
     .ring {
@@ -24812,6 +24888,10 @@ test('ring', async () => {
       }
     }
 
+    .ring-blue-500 {
+      --tw-ring-color: var(--ring-color-blue-500);
+    }
+
     .ring-current, .ring-current\\/50 {
       --tw-ring-color: currentcolor;
     }
@@ -25551,6 +25631,7 @@ test('ring-offset', async () => {
       css`
         @theme {
           --color-red-500: #ef4444;
+          --ring-offset-color-blue-500: #3b82f6;
         }
         @tailwind utilities;
       `,
@@ -25561,6 +25642,7 @@ test('ring-offset', async () => {
         'ring-offset-red-500/50',
         'ring-offset-red-500/[0.5]',
         'ring-offset-red-500/[50%]',
+        'ring-offset-blue-500',
         'ring-offset-current',
         'ring-offset-current/50',
         'ring-offset-current/[0.5]',
@@ -25593,6 +25675,7 @@ test('ring-offset', async () => {
   ).toMatchInlineSnapshot(`
     ":root, :host {
       --color-red-500: #ef4444;
+      --ring-offset-color-blue-500: #3b82f6;
     }
 
     .ring-offset-0 {
@@ -25693,6 +25776,10 @@ test('ring-offset', async () => {
       }
     }
 
+    .ring-offset-blue-500 {
+      --tw-ring-offset-color: var(--ring-offset-color-blue-500);
+    }
+
     .ring-offset-current, .ring-offset-current\\/50 {
       --tw-ring-offset-color: currentcolor;
     }