Invalid css transformation on build

[emirhangumus]

What version of Tailwind CSS are you using?

v4.0.0

What build tool (or framework if it abstracts the build tool) are you using?

svelte 5.19.2, tailwindcss/vite 4.0.0, vite 6.0.11

What version of Bun js are you using?

v1.2.0

What browser are you using?

Zen Browser (Firefox)

What operating system are you using?

Ubuntu 22.04

Reproduction URL

https://play.tailwindcss.com/czuZLwTt4a

Describe your issue

The bug is, i have a class like this lg:bg-[center_bottom_-15rem] and on development mode, tailwind puts all thing as is. When build the app, transformation is convert that into invalid status.
center turning into 50% and its invalid.
Expectation is, not creating a invalid value.

[wongjn]

Seems like a bug in Lightning CSS: parcel-bundler/lightningcss#771

[mrxbox98]

I'm facing a similar issue when I use text-[#C0C0C0]/50. On dev its is color-mix(in oklab, #C0C0C0 50%, transparent); which is fine, but once it's built it becomes oklab(80.7796% --11 .9209e-8 5.96046e-8 / .5); which is invalid css.

[wongjn]

A different bug in Lightning CSS: parcel-bundler/lightningcss#899

[viettc98]

Have anyone handle this bug guys, I just faced this bug.

[philipp-spiess]

@viettc98 If you are referring to the background-position bug, there is a workaround in the lightnincss issue: parcel-bundler/lightningcss#771 (comment)

So this should work:

lg:bg-[left_50% _bottom_-15rem]

[ckoca]

A different bug in Lightning CSS: parcel-bundler/lightningcss#899

This is now fixed in Lightning CSS v1.29.2.

[titanve]

A different bug in Lightning CSS: parcel-bundler/lightningcss#899

This is now fixed in Lightning CSS v1.29.2.

It seems like