[v4] Background gradient does not display (generated css has syntax error)

[oliverlambson]

What version of Tailwind CSS are you using?

v4.0.1

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

postcss-cli 11.0.0, postcss 8.5.1

What version of Node.js are you using?

v22.12.0

What browser are you using?

Chrome & Safari (same issue)

What operating system are you using?

macOS

Reproduction URL

https://github.com/oliverlambson/tailwind-gradient

Describe your issue

When using background gradients, the generated css contains a syntax error that causes the gradient to not display.

Actual output (css formatted for clarity):

  .to-green-500 {
    --tw-gradient-to: var(--color-green-500);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position,) /* there should be a comma after closing paren */
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }

Correct output:

  .to-green-500 {
    --tw-gradient-to: var(--color-green-500);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }

As-generated css	Manually-corrected css

[MohsinFarooq]

I would like to work on this issue if no one has started yet?

[MohsinFarooq]

@RobinMalfait Could you please share with me the contributing documentation? I can't seem to make sense of how to contribute and start-up the project locally

[RobinMalfait]

Hey!

The generated CSS works as expected to me (if you just run npm run build:css). The , you mention should not be there, but should be part of the variable definition:

If you look at the final computed CSS, you will see this:

linear-gradient(to right, oklch(0.623 0.214 259.815) 0%, oklch(0.723 0.219 149.579) 100%)

You can compute this yourself using window.getComputedStyle($0).backgroundImage where $0 is a reference to the div.

You can also see that behavior in Tailwind Play: https://play.tailwindcss.com/p4BqoBeUwQ

That said, the moment you run Prettier on the generated file, the background-image is computed as none

This is because the , was already encoded in the --tw-gradient-position CSS variable and Prettier removes the trailing comma there (we opened a Prettier issue for this: prettier/prettier#17058 ).

The reason it's encoded in the --tw-gradient-position, is because that variable is optional. That's also why we use it as var(--tw-gradient-position,). Notice that last comma? If that variable is undefined it will use the fallback value which is nothing in this case.

If we encode the , where we use the var(--tw-gradient-position) and if the variable is not defined anywhere, then we will generate something with a double comma: ,, which makes the whole rule invalid.

I'm also assuming that you created this as a minimal reproduction repo (which is good) but the default behavior works as expected. Are you using any other tools in your build pipeline by any chance? It could be that other minifiers are at work here that also get rid of the trailing , rendering this utility invalid.

All that said, we opened a PR to improve this behavior to workaround the linked Prettier bug. Essentially we now moved the , to make sure that it doesn't get accidentally removed and we made checked that --tw-gradient-position is always defined.

Linked PR: #16072

[RobinMalfait]

Hey! Quick update, we merged a fix as part of #16072 which will be available in the next release. You can already try it using the insiders build if you want

• npm install tailwindcss@insiders @tailwindcss/postcss@insiders

[oliverlambson]

@RobinMalfait that was insanely fast, tysm!

(Yes I was still running prettier in IDE)