Add --border-color to divide theme keys (#18704)

## Summary

In Tailwind 3 the border colors were able to be used with `divide`
utilities. I made it so that's true for Tailwind 4.

## Test plan

Just used `pnpm run tdd` and making it fails then making sure it passes.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Bill Criswell 2025-08-13 10:44:44 -04:00 • committed by GitHub
parent 42d2433ab8
commit 1855d68cd7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 1 deletions

View file

@ -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

View file

@ -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;
}

View file

@ -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'),