From 90422e96d82e7b624d79ae8aa1d2ec3bdb364fa4 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 20 Nov 2025 18:41:39 -0500 Subject: [PATCH 1/4] =?UTF-8?q?Treat=20`ringColor.DEFAULT`=20as=20`?= =?UTF-8?q?=E2=80=94default-ring-color`=20when=20loading=20configs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/compat/apply-config-to-theme.test.ts | 6 ++++++ .../tailwindcss/src/compat/apply-config-to-theme.ts | 12 ++++++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts index f36e5ab15a7c..6a815630f096 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts +++ b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts @@ -57,6 +57,10 @@ test('config values can be merged into the theme', () => { '2xl': ['2rem'], }, + ringColor: { + DEFAULT: '#fff', + }, + letterSpacing: { superWide: '0.25em', }, @@ -125,6 +129,8 @@ test('config values can be merged into the theme', () => { expect(theme.resolve('100%', ['--width'])).toEqual('100%') expect(theme.resolve('9xs', ['--container'])).toEqual('6rem') expect(theme.resolve('fast', ['--ease'])).toEqual('cubic-bezier(0, 0.55, 0.45, 1)') + expect(theme.get(['--ring-color'])).toEqual(null) + expect(theme.get(['--default-ring-color'])).toEqual('#fff') }) test('will reset default theme values with overwriting theme values', () => { diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts index ce3958eb3a24..2a033b0bc86c 100644 --- a/packages/tailwindcss/src/compat/apply-config-to-theme.ts +++ b/packages/tailwindcss/src/compat/apply-config-to-theme.ts @@ -50,6 +50,18 @@ export function applyConfigToTheme( } } + // ringColor.DEFAULT is a special case that maps to `--default-ring-color` + // as to match the behavior of v3 + if (path[0] === 'ringColor' && path[1] === 'DEFAULT') { + designSystem.theme.add( + '--default-ring-color', + '' + value, + ThemeOptions.INLINE | ThemeOptions.REFERENCE | ThemeOptions.DEFAULT, + ) + + continue + } + let name = keyPathToCssProperty(path) if (!name) continue From 21e07ef6aa1771c69a8513c7c29cd9497b758db2 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 20 Nov 2025 18:42:01 -0500 Subject: [PATCH 2/4] =?UTF-8?q?Migrate=20`ringColor.DEFAULT`=20to=20`?= =?UTF-8?q?=E2=80=94default-ring-color`=20during=20upgrades?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- integrations/upgrade/js-config.test.ts | 3 +++ .../src/codemods/config/migrate-js-config.ts | 8 ++++++++ 2 files changed, 11 insertions(+) diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts index eaa04df96bca..2b6aff9fb3e2 100644 --- a/integrations/upgrade/js-config.test.ts +++ b/integrations/upgrade/js-config.test.ts @@ -34,6 +34,9 @@ test( steel: 'rgb(70 130 180 / )', smoke: 'rgba(245, 245, 245, var(--smoke-alpha, ))', }, + ringColor: { + DEFAULT: '#c0ffee', + }, opacity: { superOpaque: '0.95', }, diff --git a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts index 1b2b066ab661..d22901b57caa 100644 --- a/packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts +++ b/packages/@tailwindcss-upgrade/src/codemods/config/migrate-js-config.ts @@ -237,6 +237,14 @@ async function migrateTheme( prevSectionKey = sectionKey } + // ringColor.DEFAULT is a special case that maps to `--default-ring-color` + // as to match the behavior of v3 + if (key[0] === 'ringColor' && key[1] === 'DEFAULT') { + let property = 'default-ring-color' + themeSection.push(` ${escape(`--${property}`)}: ${value};`) + continue + } + if (resetNamespaces.has(key[0]) && resetNamespaces.get(key[0]) === false) { resetNamespaces.set(key[0], true) let property = keyPathToCssProperty([key[0]]) From 8de8ee170bdde8eda327360e7662c70a24a40c7c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 20 Nov 2025 18:47:03 -0500 Subject: [PATCH 3/4] Update test --- integrations/upgrade/js-config.test.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts index 2b6aff9fb3e2..450d8254c97b 100644 --- a/integrations/upgrade/js-config.test.ts +++ b/integrations/upgrade/js-config.test.ts @@ -194,6 +194,8 @@ test( --color-steel: rgb(70 130 180); --color-smoke: rgba(245, 245, 245, var(--smoke-alpha, 1)); + --default-ring-color: #c0ffee; + --opacity-*: initial; --opacity-superOpaque: 95%; From 301ef6416ca7e96c65cdf14ac338fcf39e674925 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 20 Nov 2025 18:47:06 -0500 Subject: [PATCH 4/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fba8eaf94a2..d5423556f4a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Skip over arbitrary property utilities with a top-level `!` in the value ([#19243](https://github.com/tailwindlabs/tailwindcss/pull/19243)) - Support environment API in `@tailwindcss/vite` ([#18970](https://github.com/tailwindlabs/tailwindcss/pull/18970)) - Preserve case of theme keys from JS configs and plugins ([#19337](https://github.com/tailwindlabs/tailwindcss/pull/19337)) +- Handle `ringColor.DEFAULT` in JS configs ([#19348](https://github.com/tailwindlabs/tailwindcss/pull/19348)) - Upgrade: Handle `future` and `experimental` config keys ([#19344](https://github.com/tailwindlabs/tailwindcss/pull/19344)) ### Added