diff --git a/CHANGELOG.md b/CHANGELOG.md index b46318bad591..46d3ea3b17c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) +### Fixed + +- Remove invalid `!important` on CSS variable declarations ([#16668](https://github.com/tailwindlabs/tailwindcss/pull/16668)) + ## [4.0.7] - 2025-02-18 ### Fixed diff --git a/packages/tailwindcss/src/compile.ts b/packages/tailwindcss/src/compile.ts index e13f74c01b92..6b48073b5823 100644 --- a/packages/tailwindcss/src/compile.ts +++ b/packages/tailwindcss/src/compile.ts @@ -300,7 +300,7 @@ function applyImportant(ast: AstNode[]): void { continue } - if (node.kind === 'declaration') { + if (node.kind === 'declaration' && node.property[0] !== '-' && node.property[1] !== '-') { node.important = true } else if (node.kind === 'rule' || node.kind === 'at-rule') { applyImportant(node.nodes) diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts index 8867062e8ac5..bb939ebafd06 100644 --- a/packages/tailwindcss/src/important.test.ts +++ b/packages/tailwindcss/src/important.test.ts @@ -1,5 +1,6 @@ import { expect, test } from 'vitest' import { compile } from '.' +import { compileCss } from './test-utils/run' const css = String.raw @@ -87,3 +88,31 @@ test('Utilities can be wrapped with a selector and marked as important', async ( " `) }) + +test('variables in utilities should not be marked as important', async () => { + expect( + await compileCss( + css` + @theme { + --ease-out: cubic-bezier(0, 0, 0.2, 1); + } + @tailwind utilities; + `, + ['ease-out!'], + ), + ).toMatchInlineSnapshot(` + ":root, :host { + --ease-out: cubic-bezier(0, 0, .2, 1); + } + + .ease-out\\! { + --tw-ease: var(--ease-out); + transition-timing-function: var(--ease-out) !important; + } + + @property --tw-ease { + syntax: "*"; + inherits: false + }" + `) +})