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:
parent
42d2433ab8
commit
1855d68cd7
3 changed files with 9 additions and 1 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue