diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e3ae5f8888b..b870f586468c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add option to disable url rewriting in `@tailwindcss/postcss` ([#18321](https://github.com/tailwindlabs/tailwindcss/pull/18321)) - Fix false-positive migrations in `addEventListener` and JavaScript variable names ([#18718](https://github.com/tailwindlabs/tailwindcss/pull/18718)) - Fix Standalone CLI when run via symlink on Windows ([#18723](https://github.com/tailwindlabs/tailwindcss/pull/18723)) +- Read from `--border-color-*` theme keys in `divide-*` utilities for backwards compatibility ([#18704](https://github.com/tailwindlabs/tailwindcss/pull/18704/)) ## [4.1.11] - 2025-06-26 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 79934c8c044d..4feac35b762b 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8843,6 +8843,7 @@ test('divide-color', async () => { css` @theme { --color-red-500: #ef4444; + --border-color-best-blue: #6495ED; } @tailwind utilities; `, @@ -8854,6 +8855,7 @@ test('divide-color', async () => { 'divide-red-500/2.75', 'divide-red-500/[0.5]', 'divide-red-500/[50%]', + 'divide-best-blue', 'divide-current', 'divide-current/50', 'divide-current/[0.5]', @@ -8869,6 +8871,7 @@ test('divide-color', async () => { ).toMatchInlineSnapshot(` ":root, :host { --color-red-500: #ef4444; + --border-color-best-blue: #6495ed; } :where(.divide-\\[\\#0088cc\\] > :not(:last-child)) { @@ -8879,6 +8882,10 @@ test('divide-color', async () => { border-color: oklab(59.9824% -.067 -.124 / .5); } + :where(.divide-best-blue > :not(:last-child)) { + border-color: var(--border-color-best-blue); + } + :where(.divide-current > :not(:last-child)), :where(.divide-current\\/50 > :not(:last-child)) { border-color: currentColor; } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 13657f7eb3a7..52088e242f13 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2007,7 +2007,7 @@ export function createUtilities(theme: Theme) { }) colorUtility('divide', { - themeKeys: ['--divide-color', '--color'], + themeKeys: ['--divide-color', '--border-color', '--color'], handle: (value) => [ styleRule(':where(& > :not(:last-child))', [ decl('--tw-sort', 'divide-color'),