Allow customizing the default inset-ring width via --default-inset-ring-width theme variable

[yuheiy]

Summary

It would be great if the inset-ring utility supported a --default-inset-ring-width theme variable, allowing users to customize the default width when using inset-ring without a value — just like ring, border, and outline already do.

Current behavior

Currently, the inset-ring utility hardcodes 1px as its default width, making it impossible to customize via @theme. This is inconsistent with how every other similar utility handles its default width:

Utility	Theme variable	Customizable via @theme?
border	--default-border-width	Yes
outline	--default-outline-width	Yes
ring	--default-ring-width	Yes
inset-ring	(none — hardcoded 1px)	No

Example: ring (works as expected)

@theme { --default-ring-width: 3px; }

<!-- .ring uses 3px as the default ring width --> <div class="ring">...</div>

Example: inset-ring (not customizable)

@theme { /* This variable is never read — has no effect */ --default-inset-ring-width: 3px; }

<!-- .inset-ring always uses the hardcoded 1px regardless of any @theme config --> <div class="inset-ring">...</div>

Proposal

Add support for a --default-inset-ring-width theme variable so that inset-ring reads from the theme (falling back to 1px when unset), matching the established pattern used by ring, border, and outline.

This would allow users to customize the default inset ring width via @theme:

@theme { --default-inset-ring-width: 2px; }

Context

In the source (packages/tailwindcss/src/utilities.ts), the ring utility reads the default width from the theme:

// ring utility let value = theme.get(['--default-ring-width']) ?? '1px'

But the inset-ring utility hardcodes the value:

// inset-ring utility decl('--tw-inset-ring-shadow', insetRingShadowValue('1px'))

Prior art

This is the same class of inconsistency that was fixed for outline in #16469.