diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e98e6d30058..0b14b8cefcef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Support `borderRadius.*` as an alias for `--radius-*` when using dot notation inside the `theme()` function ([#14436](https://github.com/tailwindlabs/tailwindcss/pull/14436)) ## [4.0.0-alpha.24] - 2024-09-11 diff --git a/packages/tailwindcss/src/compat/apply-compat-hooks.ts b/packages/tailwindcss/src/compat/apply-compat-hooks.ts index f62d08359737..6f9b5ce1091b 100644 --- a/packages/tailwindcss/src/compat/apply-compat-hooks.ts +++ b/packages/tailwindcss/src/compat/apply-compat-hooks.ts @@ -278,6 +278,7 @@ let themeUpgradeKeys = { '--background-opacity': '--opacity', '--border-color': '--color', '--border-opacity': '--opacity', + '--border-radius': '--radius', '--border-spacing': '--spacing', '--box-shadow-color': '--color', '--caret-color': '--color', diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 05656a6768ff..65c6dbca02ca 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -241,6 +241,27 @@ describe('theme function', () => { `) }) + test('theme(borderRadius.lg)', async () => { + expect( + await compileCss(css` + @theme { + --radius-lg: 0.5rem; + } + .radius { + border-radius: theme(borderRadius.lg); + } + `), + ).toMatchInlineSnapshot(` + ":root { + --radius-lg: .5rem; + } + + .radius { + border-radius: .5rem; + }" + `) + }) + describe('for v3 compatibility', () => { test('theme(blur.DEFAULT)', async () => { expect(