Invalid transform: ; Output in Generated CSS with @tailwindcss/[email protected]

[mcdhage98]

What version of Tailwind CSS are you using?
4.1.1

What build tool (or framework if it abstracts the build tool) are you using?
"vite": "^6.0.5"
"@vitejs/plugin-react": "^4.3.4",
"@tailwindcss/postcss": "4.1.1",

What version of Node.js are you using?
v20.18.2

What browser are you using?
Chrome

What operating system are you using?
macOs

Reproduction URL
clone https://github.com/mcdhage98/ui-component-library
steps to reproduce
1)yarn
2)yarn run build
3) check
https://github.com/mcdhage98/ui-component-library/blob/0c6e23b426b24053443ec193fdb952fb87353b12/dist/styles/index.css#L965

Describe your issue
Previously i was using "@tailwindcss/postcss": "^4.0.7",
was getting proper class after build
.ui:transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}

after upgradation to 4.1.1
im getting extra line "transform: ; "
.ui:transform {
transform: ;
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}

Error
Im using this library in a project which uses sass
The error occurs during the build process in the sass-loader when processing the CSS file located at ./node_modules/ui-components/dist/styles/index.css. Specifically, at line 965, column 25, there is an invalid transform property with an empty value (transform: ;), causing a SassError: Expected expression. This breaks the build because Sass expects a valid expression after the transform property. The issue is likely caused by a misconfiguration in the PostCSS pipeline,

[wongjn]

In terms of Tailwind, this seems like it is due to #17627 that was released in v4.1.4.

Essentially, the following change:

 .ui\:transform {
-  transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
 }

It seems like it could be something to do with postcss-custom-properties. Indeed, removing it from the PostCSS config does stop the empty transform line from appearing. It could be that postcss-custom-properties does not properly handle the empty fallback ,) ending of the CSS variables, resulting in the empty transform line.

Ultimately, I think this is a bug that should be addressed in postcss-custom-properties, not Tailwind. This is because we wouldn't want to reintroduce the bug fixed by #17627, unless perhaps there is a different workaround.

[romainmenke]

I don't see the issue here.

If Tailwind declares variables with a blank fallback then postcss-custom-properties will generate a fallback property with blank values.

Everything is working as intended here.
Any change to postcss-custom-properties would make it less correct.

The nuance here is that transform: ; is valid CSS grammar and syntax even when an empty value is invalid for the transform property.

Falling back to an empty value (or other invalid values) has a specific effect.
Falling back to a combined value where some parts are blank space and others aren't also has a specific effect.

Filtering out the blank fallbacks in var() values would break valid use cases.

Options:

• stop using postcss-custom-properties, it is 2025, you likely aren't targeting IE 11 or earlier, please stop using this plugin 😅
• report this with Sass (or Sass loader?)

[romainmenke]

This is also unrelated to Tailwind or transform by the way:

See: https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLmJhciUyMCU3QiU1Q24lMjAlMjBjb2xvciUzQSUyMHZhcigtLWZvbyUyQyklM0IlNUNuJTdEJTIyJTJDJTIyY29uZmlnJTIyJTNBJTdCJTIyYnJvd3NlcnMlMjIlM0ElNUIlMjJJRSUyMDglMjIlNUQlMkMlMjJtaW5pbXVtVmVuZG9ySW1wbGVtZW50YXRpb25zJTIyJTNBMCUyQyUyMnN0YWdlJTIyJTNBMiUyQyUyMmxvZ2ljYWwlMjIlM0ElN0IlMjJpbmxpbmVEaXJlY3Rpb24lMjIlM0ElMjJsZWZ0LXRvLXJpZ2h0JTIyJTJDJTIyYmxvY2tEaXJlY3Rpb24lMjIlM0ElMjJ0b3AtdG8tYm90dG9tJTIyJTdEJTdEJTdE

.bar {
  color: var(--foo,);
}

/* becomes */

.bar {
  color:  ;
  color: var(--foo,);
}