From 53749c3725c378337d7945c89d77b9437808e89c Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 12 Feb 2025 18:16:30 +0100
Subject: [PATCH] Read from `--default-outline-width` (#16469)

Closes https://github.com/tailwindlabs/tailwindcss.com/issues/2073

This ensures that we can customize `outline` via
`--default-outline-width` just like `ring`, `border`, and other
utilities.

## Test plan

Added unit tests for `--default-outline-width` and
`--default-ring-width`
---
 CHANGELOG.md                               |   1 +
 packages/tailwindcss/src/utilities.test.ts | 113 +++++++++++++++++++++
 packages/tailwindcss/src/utilities.ts      |   3 +-
 3 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23e50613bf2c..ebf58d2f7833 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix sorting numeric utilities when they have different magnitudes ([#16414](https://github.com/tailwindlabs/tailwindcss/pull/16414))
 - Show suggestions for fractions in IntelliSense ([#16353](https://github.com/tailwindlabs/tailwindcss/pull/16353))
 - Don’t replace `_` in suggested theme keys ([#16433](https://github.com/tailwindlabs/tailwindcss/pull/16433))
+- Ensure `--default-outline-width` can be used to change the `outline-width` value of the `outline` utility
 
 ## [4.0.6] - 2025-02-10
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index bb3d4f2a0f28..89a88346694d 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -14736,6 +14736,32 @@ test('outline', async () => {
       initial-value: solid;
     }"
   `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --default-outline-width: 2px;
+        }
+        @tailwind utilities;
+      `,
+      ['outline'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --default-outline-width: 2px;
+    }
+
+    .outline {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+
+    @property --tw-outline-style {
+      syntax: "*";
+      inherits: false;
+      initial-value: solid;
+    }"
+  `)
   expect(
     await run([
       '-outline',
@@ -15849,6 +15875,93 @@ test('ring', async () => {
       initial-value: 0 0 #0000;
     }"
   `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --default-ring-width: 2px;
+        }
+        @tailwind utilities;
+      `,
+      ['ring'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --default-ring-width: 2px;
+    }
+
+    .ring {
+      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
+    @property --tw-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+
+    @property --tw-shadow-color {
+      syntax: "*";
+      inherits: false
+    }
+
+    @property --tw-inset-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+
+    @property --tw-inset-shadow-color {
+      syntax: "*";
+      inherits: false
+    }
+
+    @property --tw-ring-color {
+      syntax: "*";
+      inherits: false
+    }
+
+    @property --tw-ring-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+
+    @property --tw-inset-ring-color {
+      syntax: "*";
+      inherits: false
+    }
+
+    @property --tw-inset-ring-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }
+
+    @property --tw-ring-inset {
+      syntax: "*";
+      inherits: false
+    }
+
+    @property --tw-ring-offset-width {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0;
+    }
+
+    @property --tw-ring-offset-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: #fff;
+    }
+
+    @property --tw-ring-offset-shadow {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0 0 #0000;
+    }"
+  `)
   expect(
     await run([
       // ring color
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index ea9a39ec466b..c2dd524ab035 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -3928,10 +3928,11 @@ export function createUtilities(theme: Theme) {
     utilities.functional('outline', (candidate) => {
       if (candidate.value === null) {
         if (candidate.modifier) return
+        let value = theme.get(['--default-outline-width']) ?? '1px'
         return [
           outlineProperties(),
           decl('outline-style', 'var(--tw-outline-style)'),
-          decl('outline-width', '1px'),
+          decl('outline-width', value),
         ]
       }