Read from --default-outline-width (#16469)

Closes tailwindlabs/tailwindcss.com#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`

Author: philipp-spiess

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
 

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

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),
         ]
       }