diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index bca419c3a40a..c91f5fee7787 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -146,7 +146,7 @@ describe('--spacing(…)', () => { }) describe('--theme(…)', () => { - test('theme(--color-red-500)', async () => { + test('--theme(--color-red-500)', async () => { expect( await compileCss(css` @theme { @@ -166,6 +166,19 @@ describe('--theme(…)', () => { }" `) }) + + test('--theme(…) can only be used with CSS variables from your theme', async () => { + expect(() => + compileCss(css` + @theme { + --color-red-500: #f00; + } + .red { + color: --theme(colors.red.500); + } + `), + ).rejects.toThrowErrorMatchingInlineSnapshot(`[Error: The --theme(…) function can only be used with CSS variables from your theme.]`) + }) }) describe('theme(…)', () => { diff --git a/packages/tailwindcss/src/css-functions.ts b/packages/tailwindcss/src/css-functions.ts index ecd546e7ad8d..bb27658c5929 100644 --- a/packages/tailwindcss/src/css-functions.ts +++ b/packages/tailwindcss/src/css-functions.ts @@ -9,7 +9,7 @@ const functions: Record