Nu Html Checker (W3C Validator) reports: too few values for the property `linear-gradient`

[onlime]

What version of Tailwind CSS are you using?

v2.2.9

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

Nuxt.js 2.15.8

What version of Node.js are you using?

v16.7.0

What browser are you using?

Firefox, Chrome

What operating system are you using?

macOS

Reproduction repository

Describe your issue

On https://pipo.blog, I am using an SVG background Vue component with the following gradient overlay:

<div class="absolute inset-0 bg-gradient-to-b from-gray-800"></div>

This works fine and looks ok, but Nu Html Checker (W3C Validator) reports:

Error: CSS: background-image: too few values for the property linear-gradient.

pointing to affected code:

background-image:linear-gradient(to right,var(--tw-gradient-stops))

The same validation error is reported if I reverse gradient direction like this (in #4807 it was recommended NOT to use from-transparent):

<div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-800"></div>

If this is JIT related, here's my first lines of tailwind.config.js (using @nuxtjs/tailwindcss):

module.exports = {
    mode: 'jit',
    purge: [
        './components/**/*.{js,jsx,ts,tsx,vue}',
        './layouts/**/*.{js,jsx,ts,tsx,vue}',
        './pages/**/*.{js,jsx,ts,tsx,vue}',
    ],
// ...

[adamwathan]

Hey! This is a bug in the validator I'm afraid, the declaration is totally valid. CSS variables can be used in place of multiple parts of a property and expand to fill in the full value, for example:

/* With variable */
.foo {
  --gradient-stops: #000, #fff;
  background-image:linear-gradient(to right, var(--tw-gradient-stops));
}

/* Computed as */
.foo {
  background-image:linear-gradient(to right, #000, #fff);
}

Closing as not a bug here and not something we can/will change. Thanks though!

[onlime]

Thanks @adamwathan - I have filed an issue for the validator here: https://github.com/validator/validator/issues/1224